动态效果

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

@@ -245,130 +245,138 @@ export default {
 
     regionTop() {
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
-      var salvProName = ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道', '锦程街道'];
-      var salvProValue = [239, 181, 154, 144, 135, 117, 124];
-      var salvProMax = [];//背景按最大值
-      for (let i = 0; i < salvProValue.length; i++) {
-        salvProMax.push(salvProValue[0])
+      let labelData = ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道', '锦程街道'];
+      let valueData = [];
+      for (var i = 0; i < labelData.length; i++) {
+        var lineNumber = Math.floor(Math.random() * 1000);
+        valueData.push(lineNumber);
       }
-      let option = {
-        grid: {
-          top: 10,
-          left: 33,
-          right: 20,
-          bottom: 5,
-          containLabel: true
+      var option = {
+        "backgroundColor": "rgba(0, 0, 0, 0)",
+        title: {
+          show: true,
+          text: '',
+          textStyle: {
+            color: '#fff',
+            fontSize: '12',
+          },
+          top: '0%',
+          left: '20%',
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'none'
-          },
-          formatter: function (params) {
-            return params[0].name + ' : ' + params[0].value
+            type: 'shadow'
           }
         },
-        xAxis: {
-          show: false,
-          type: 'value'
+        grid: {
+          top: '10%',
+          left: '12%',
+          right: '5%',
+          buttom: '0',
         },
-        yAxis: [{
+        xAxis: {
           type: 'category',
-          inverse: true,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)',
+            },
+          },
           axisLabel: {
-            show: true,
+            margin: 10,
+            rotate: 45,
+            color: '#e2e9ff',
             textStyle: {
-              color: '#fff'
+              fontSize: 12
             },
           },
-          splitLine: {
-            show: false
-          },
           axisTick: {
-            show: false
+            show: false,
+          },
+          data: labelData
+        },
+        yAxis: {
+          name: '',
+          nameTextStyle: {
+            color: '#fff',
           },
+          type: 'value',
           axisLine: {
-            show: false
+            show: false,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
+            },
           },
-          data: salvProName
-        }, {
-          type: 'category',
-          inverse: true,
-          axisTick: 'none',
-          axisLine: 'none',
-          show: true,
           axisLabel: {
-            textStyle: {
-              color: '#ffffff',
-              fontSize: '12'
-            },
+            formatter: '{value}',
+            color: '#e2e9ff',
           },
-          data: salvProValue.map((item) => {
-            return item + "个";
-          })
-        }],
-        series: [{
-          name: '值',
-          type: 'bar',
-          zlevel: 1,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 30,
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                offset: 0,
-                color: '#0e3eaf'
-              }, {
-                offset: 1,
-                color: '#00ffff'
-              }]),
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
+            }
+          },
+          axisTick: {
+            show: false,
+
+            lineStyle: {
+              color: '#fff',
             },
           },
-          barWidth: 20,
-          data: salvProValue
         },
+        // 切片
+        series: [
           {
             type: 'lines',
             coordinateSystem: 'cartesian2d',
-            data: salvProValue.map((item, index) => {
+            data: valueData.map((item, index) => {
               return {
                 coords: [
-                  [0, index],
-                  [item - 4, index]
+                  [index, 0],
+                  [index, item - 4]
                 ]
               };
             }),
             effect: {
               show: true,
-              period: 2.5,
+              period: 3.5,// 周期 速度 2.5
               trailLength: 0.5, //控制拖尾长度
-              symbolSize: [20, 2],
-              symbol: this.$store.state.common.echarts_baseStreamer,
+              symbolSize: 25, // ⭐⭐星星大小
+              symbol:
+                'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
               loop: true,
-              color: '#fff'   //流光颜色
+              color: '#ffffff' //流光颜色
             },
             lineStyle: {
               width: 0,
               opacity: 0.6,
               curveness: 0
             },
-            zlevel: 10,
+            z: 999
           },
           {
-            name: '背景',
             type: 'bar',
-            barWidth: 20,
-            barGap: '-100%',
-            data: salvProMax,
+            data: valueData,
+            barWidth: '20px',
             itemStyle: {
               normal: {
-                color: 'rgba(24,31,68,1)',
-                barBorderRadius: 30,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                }], false),
+                barBorderRadius: [30, 30, 30, 30],
+                shadowColor: 'rgba(0,160,221,1)',
+                shadowBlur: 4,
               }
             },
-          },
-        ]
+          }]
       };
-      myChart.setOption(option);
+      if (option) {
+        myChart.setOption(option);
+      }
     },
 
     trend() {
@@ -1553,7 +1561,7 @@ export default {
             // margin: 14,
             fontSize: 10,
             textStyle: {
-              color: "#a8d5ff" //X轴文字颜色
+              color: "#e2e9ff" //X轴文字颜色
             }
           }
         },
@@ -1586,7 +1594,7 @@ export default {
               margin: 7,
               fontSize: 10,
               textStyle: {
-                color: "#a8d5ff"
+                color: "#e2e9ff"
               }
             }
           }