横向柱状图动态

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

@@ -233,14 +233,12 @@ export default {
     resourceDistribution() {
       //资源分布
       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: 0,
@@ -249,122 +247,118 @@ export default {
           bottom: 0,
           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
-          }
-        },
-        series: [{
-          name: 'label',
-          type: 'bar',
-          barWidth: 6,
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 4,
-            color: '#fff',
-            fontSize: 12
           },
-          data: data.map((item) => {
-            return {
-              value: 0,
-              label: {
-                formatter() {
-                  return item.label;
-                }
-              }
-            };
-          })
+          data: salvProName
         }, {
-          name: 'value',
-          type: 'bar',
-          barWidth: 8,
-          barMinHeight: 8, // 最小高度
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 'right',
-            color: '#00d5e1',
-            fontSize: 12,
-            rich: {
-              value: {
-                color: '#00e1ce'
-              }
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#ffffff',
+              fontSize: '12'
             },
-            formatter({
-                        value
-                      }) {
-              return `{value|${value}个}`;
-            }
           },
+          data: salvProValue.map((item) => {
+            return item + "个";
+          })
+        }],
+        series: [{
+          name: '值',
+          type: 'bar',
+          zlevel: 1,
           itemStyle: {
-            barBorderRadius: 3
+            normal: {
+              barBorderRadius: 30,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0e3eaf'
+              }, {
+                offset: 1,
+                color: '#00ffff'
+              }]),
+            },
           },
-          data: data.map(({
-                            value
-                          }, index) => {
-            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
-              offset: 1,
-              color: '#0e3eaf' // 0% 处的颜色
-            }, {
-              offset: 0,
-              color: '#00ffff' // 100% 处的颜色
-            }], false)
-            return {
-              value,
-              label: {
-                color
-              },
-              itemStyle: {
-                color
+          barWidth: 20,
+          data: salvProValue
+        },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: salvProValue.map((item, index) => {
+              return {
+                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: '背景',
+            type: 'bar',
+            barWidth: 20,
+            barGap: '-100%',
+            data: salvProMax,
+            itemStyle: {
+              normal: {
+                color: 'rgba(24,31,68,1)',
+                barBorderRadius: 30,
               }
-            };
-          })
-        }]
+            },
+          },
+        ]
       };
-
       if (option) {
         myChart.setOption(option);
       }
-
-      let updateInterval = 1000; // 更新间隔，单位：毫秒
-      let updateData = () => {
-        data.forEach((item) => {
-          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
-          if (item.value >= 1000) {
-            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: '#2386ff'
-          }, {
-            offset: 0,
-            color: '#00ffff'
-          }], false);
-
-          return {
-            value,
-            label: {color},
-            itemStyle: {color}
-          };
-        });
-
-        myChart.setOption(option);
-      };
-
-      updateData(); // 首次更新数据
-
-      let timer = setInterval(updateData, updateInterval);
     },
     deviceOnline() {
       //在线设备

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

@@ -232,14 +232,12 @@ export default {
     resourceDistribution() {
       //资源分布
       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: 0,
@@ -248,122 +246,118 @@ export default {
           bottom: 0,
           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
-          }
-        },
-        series: [{
-          name: 'label',
-          type: 'bar',
-          barWidth: 6,
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 4,
-            color: '#fff',
-            fontSize: 12
           },
-          data: data.map((item) => {
-            return {
-              value: 0,
-              label: {
-                formatter() {
-                  return item.label;
-                }
-              }
-            };
-          })
+          data: salvProName
         }, {
-          name: 'value',
-          type: 'bar',
-          barWidth: 8,
-          barMinHeight: 8, // 最小高度
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 'right',
-            color: '#00d5e1',
-            fontSize: 12,
-            rich: {
-              value: {
-                color: '#00e1ce'
-              }
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#ffffff',
+              fontSize: '12'
             },
-            formatter({
-                        value
-                      }) {
-              return `{value|${value}个}`;
-            }
           },
+          data: salvProValue.map((item) => {
+            return item + "个";
+          })
+        }],
+        series: [{
+          name: '值',
+          type: 'bar',
+          zlevel: 1,
           itemStyle: {
-            barBorderRadius: 3
+            normal: {
+              barBorderRadius: 30,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0e3eaf'
+              }, {
+                offset: 1,
+                color: '#00ffff'
+              }]),
+            },
           },
-          data: data.map(({
-                            value
-                          }, index) => {
-            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
-              offset: 1,
-              color: '#0e3eaf' // 0% 处的颜色
-            }, {
-              offset: 0,
-              color: '#00ffff' // 100% 处的颜色
-            }], false)
-            return {
-              value,
-              label: {
-                color
-              },
-              itemStyle: {
-                color
+          barWidth: 20,
+          data: salvProValue
+        },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: salvProValue.map((item, index) => {
+              return {
+                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: '背景',
+            type: 'bar',
+            barWidth: 20,
+            barGap: '-100%',
+            data: salvProMax,
+            itemStyle: {
+              normal: {
+                color: 'rgba(24,31,68,1)',
+                barBorderRadius: 30,
               }
-            };
-          })
-        }]
+            },
+          },
+        ]
       };
-
       if (option) {
         myChart.setOption(option);
       }
-
-      let updateInterval = 1000; // 更新间隔，单位：毫秒
-      let updateData = () => {
-        data.forEach((item) => {
-          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
-          if (item.value >= 1000) {
-            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: '#2386ff'
-          }, {
-            offset: 0,
-            color: '#00ffff'
-          }], false);
-
-          return {
-            value,
-            label: {color},
-            itemStyle: {color}
-          };
-        });
-
-        myChart.setOption(option);
-      };
-
-      updateData(); // 首次更新数据
-
-      let timer = setInterval(updateData, updateInterval);
     },
     deviceOnline() {
       //在线设备