饼状图

src/views/workbenchPro/components/BJinsannianzijin/index.vue

@@ -46,58 +46,78 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
-      const option = {
+      var value1 = Math.random() * 100; // 生成第一个随机值
+      var value2 = 300 - value1; // 第二个随机值，保证总和为100
+
+      // 计算比例
+      var minOffset = value1 / 100; // 第一个颜色的渐变比例
+      var maxOffset = (value1 + value2) / 100; // 第二个颜色的渐变比例（这里总和为100，所以maxOffset等于1）
+
+     let option = {
         series: [
           {
             type: 'gauge',
+            splitNumber: 3,
+            radius: '93%',
+            center: ["50%", "70%"],
             startAngle: 180,
             endAngle: 0,
-            center: ['50%', '80%'],
-            radius: '100%',
+            min: 0,
+            max: 100,
+            pointer: {
+              show: true,
+              width: 7,
+              length: "60%",
+              borderColor: '#000',
+              borderWidth: '10',
+            },
             axisLine: {
+              show: true,
               lineStyle: {
-                width: 30,
+                width: 35,
                 color: [
-                  [0.298, '#2d99e2'],
-                  [1, '#dce3ec'],
+                  [0.5, '#7BB2FF'], // 第一个颜色
+                  [0.6, '#000'],
+                  [1, '#4186FF']  // 第二个颜色
                 ],
               },
             },
-            axisTick: { show: false },
-            axisLabel: { show: false },
-            splitLine: { show: false },
-            pointer: {
-              offsetCenter: [0, '10%'],
-              icon: 'path://M0,0 L0,-20 L5,-20 L5,-30 L15,-30 L15,-20 L20,-20 L20,0 Z', // 圆点 + 线 + 三角形
-              length: '80%', // 调整长度
-              itemStyle: {
-                color: '#000',
-                width: 2, // 设置指针粗细
+            axisLabel: {
+              show: true,
+              color: "#666",
+              fontSize: 16,
+              formatter: function (value) {
+                return value.toFixed(0);
               },
             },
-            title: {
-              show: true,
-              offsetCenter: [0, '25%'],
-              textStyle: {
-                color: '#2d99e2',
-                fontSize: 15,
-                fontFamily: '微软雅黑',
-                fontWeight: 'bold',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: "28%",
+              lineStyle: {
+                color: "#fff",
+                width: 2,
               },
             },
             detail: {
-              show: false,
+              show: false
+            },
+            title: {
+              show: false
             },
             data: [
               {
-                value: 29.8,
-                name: '你要的比例 29.8%',
-              },
+                value: value1,
+                name: '决策层国际化导向'
+              }
             ],
-          },
-        ],
+          }
+        ]
       };
 
+
       this.chart.setOption(
         option
       )