区域办件量TOP

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

@@ -243,15 +243,12 @@ export default {
 
     regionTop() {
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
-      let data = [
-        {value: 0, label: '前程街道'},
-        {value: 0, label: '富民街道'},
-        {value: 0, label: '广兴街道'},
-        {value: 0, label: '东风街道'},
-        {value: 0, label: '锦绣街道'},
-        {value: 0, label: '锦城街道'}
-      ];
-
+      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 option = {
         grid: {
           top: 10,
@@ -260,117 +257,116 @@ export default {
           bottom: 5,
           containLabel: true
         },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: function (params) {
+            return params[0].name + ' : ' + params[0].value
+          }
+        },
         xAxis: {
-          type: 'value',
-          show: false
+          show: false,
+          type: 'value'
         },
-        yAxis: {
-          show: true,
-          inverse: true,
+        yAxis: [{
           type: 'category',
+          inverse: true,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            },
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
           axisLine: {
             show: false
-          }
+          },
+          data: salvProName
+        }, {
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#ffffff',
+              fontSize: '12'
+            },
+          },
+          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'
+              }]),
+            },
+          },
+          barWidth: 20,
+          data: salvProValue
         },
-        series: [
           {
-            name: 'label',
-            type: 'bar',
-            barWidth: 10,
-            yAxisIndex: 0,
-            label: {
-              show: true,
-              position: 2,
-              color: '#fff',
-              fontSize: 12
-            },
-            data: data.map((item) => {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: salvProValue.map((item, index) => {
               return {
-                value: 0,
-                label: {
-                  formatter() {
-                    return item.label;
-                  }
-                }
+                coords: [
+                  [0, index],
+                  [item - 4, index]
+                ]
               };
-            })
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [20, 2],
+              symbol: 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              loop: true,
+              color: '#fff'   //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            zlevel: 10,
           },
           {
-            name: 'value',
+            name: '背景',
             type: 'bar',
-            barWidth: 10,
-            barMinHeight: 10,
-            yAxisIndex: 0,
-            label: {
-              show: true,
-              position: 'right',
-              color: '#00d5e1',
-              fontSize: 12,
-              rich: {
-                value: {
-                  color: '#00e1ce'
-                }
-              },
-              formatter({
-                          value
-                        }) {
-                return `{value|${value}个}`;
-              }
-            },
+            barWidth: 20,
+            barGap: '-100%',
+            data: salvProMax,
             itemStyle: {
-              barBorderRadius: 3
+              normal: {
+                color: 'rgba(24,31,68,1)',
+                barBorderRadius: 30,
+              }
             },
-            data: data.map(({value}, index) => {
-              let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
-                offset: 1,
-                color: '#004eaf'
-              }, {
-                offset: 0,
-                color: '#089aa2'
-              }], false);
-
-              return {
-                value,
-                label: {color},
-                itemStyle: {color}
-              };
-            })
-          }
+          },
         ]
       };
-
-      let updateInterval = 1000; // 更新间隔，单位：毫秒
-      let updateRegionTop = () => {
-        data.forEach((item) => {
-          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
-          if (item.value >= 100) {
-            item.value = 0; // 当增加到1000时重新开始
-          }
-        });
-
-        option.series[1].data = data.map(({value}, index) => {
-          let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
-            offset: 1,
-            color: '#004eaf'
-          }, {
-            offset: 0,
-            color: '#089aa2'
-          }], false);
-
-          return {
-            value,
-            label: {color},
-            itemStyle: {color}
-          };
-        });
-
         myChart.setOption(option);
-      };
-
-      updateRegionTop(); // 首次更新数据
-
-      let timer = setInterval(updateRegionTop, updateInterval);
-
     },
 
     trend() {