柱状图动态

zhsq_qk-ui/src/views/fusion/jczl.vue

@@ -1192,19 +1192,32 @@ export default {
     nl() {
       // 年龄
       var myChart = echarts.init(document.getElementById('sprh-nl'));
+      let timeOut4 = null
+      clearInterval(timeOut4)
+      myChart.clear();
       var data = ['0-10岁', '11-20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-70岁', '71-80岁', '80岁以上']
       var monthData = []
       var lineData = []
-      for (var i = 1; i <= data.length; i++) {
+      for (var i = 0; i < data.length; i++) {
         monthData.push(data[i])
-        var lineNumber = Math.floor(Math.random() * 10000);
+        var lineNumber = Math.floor(Math.random() * 1000);
         lineData.push(lineNumber);
       }
 
       var option = {
+        "backgroundColor": "rgba(0, 0, 0, 0)",
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: false
+            }
+          }
+        },
         grid: {
-          left: '12%',
-          top: '5%',
+          left: '15%',
+          top: '10%',
           bottom: '12%',
           right: '8%'
         },
@@ -1257,35 +1270,33 @@ export default {
         }
         ],
         series: [{
-          type: 'pictorialBar',
-          barCategoryGap: '0%',
-          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+          type: "pictorialBar",
+          barCategoryGap: "0%",
+          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
           label: {
             show: true,
-            position: 'top',
+            position: "top",
             distance: 15,
-            color: '#0073ff',
-            fontWeight: 'bolder',
-            fontSize: 14,
+            fontSize: 15,
+            color: "#08DFFE",
+            fontWeight: "bolder",
           },
           itemStyle: {
             normal: {
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                   offset: 0,
-                  color: '#19e1ff'
-                },
-                  {
-                    offset: 1,
-                    color: '#0f48a3'
-                  }
-                ],
-                global: false //  缺省为  false
+                  color: "#9A11FF"
+                }, {
+                  offset: 1,
+                  color: "#08DFFE"
+                }],
+                global: false
               }
             },
             emphasis: {
@@ -1295,31 +1306,29 @@ export default {
           data: lineData
         }]
       };
-
-      var currentIndex = -1;
-      var timer = setInterval(function () {
-        // 生成新的随机数据
-        currentIndex++;
-        if (currentIndex >= 9) {
-          currentIndex = 0;
-          for (var i = 0; i < lineData.length; i++) {
-            lineData[i] = Math.floor(Math.random() * 1000);
-          }
-        } else {
-          lineData[currentIndex] = Math.floor(Math.random() * 1000);
-        }
-
-        // 更新 option 中的数据
-        option.series[0].data = lineData;
-
-        // 重新渲染图表
-        myChart.setOption(option);
-      }, 1000); // 每秒更新一次数据
-
-
       if (option) {
         myChart.setOption(option);
       }
+      var currentIndex = -1;
+      timeOut4 = setInterval(() => {
+        var dataLen = option.series[0].data.length;
+        myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: currentIndex
+        });
+        currentIndex = (currentIndex + 1) % dataLen;
+        myChart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: currentIndex,
+        });
+        myChart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: currentIndex
+        });
+      }, 1000)
     },
     hy() {
       // 婚姻比例