动态

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

@@ -190,24 +190,13 @@ export default {
     resourceDistribution() {
       //资源分布
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
-      let data = [{
-        value: 120,
-        label: '东兴网格'
-      }, {
-        value: 142,
-        label: '胜利网格'
-      }, {
-        value: 110,
-        label: '裕民网格'
-      },
-        {
-          value: 132,
-          label: '首期网格'
-        },
-        {
-          value: 132,
-          label: '民生网格  '
-        }
+      let data = [
+        { value: 0, label: '前程街道' },
+        { value: 0, label: '富民街道' },
+        { value: 0, label: '广兴街道' },
+        { value: 0, label: '东风街道' },
+        { value: 0, label: '锦绣街道' },
+        { value: 0, label: '锦城街道' }
       ];
       let option = {
         grid: {
@@ -296,65 +285,67 @@ export default {
       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: '#004eaf'
+          }, {
+            offset: 0,
+            color: '#089aa2'
+          }], false);
+
+          return {
+            value,
+            label: { color },
+            itemStyle: { color }
+          };
+        });
+
+        myChart.setOption(option);
+      };
+
+      updateData(); // 首次更新数据
+
+      let timer = setInterval(updateData, updateInterval);
     },
     deviceOnline() {
-      // 视频融合--在线设备
-// 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('sprh-zxfb'));
       const dataArr = [
         {
-          value: 61,
+          value: 0,  // 初始值设为0
           name: '在线',
         },
       ];
-      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        {
-          offset: 0,
-          color: '#0d4470', // 0% 处的颜色
-        },
-        {
-          offset: 1,
-          color: '#0659c9', // 100% 处的颜色
-        },
-      ]);
-      const colorSet = [
-        [0.61, color],
-        [1, '#15337C'],
-      ];
-      const rich = {
-        white: {
-          fontSize: 10,
-          color: '#0454bf',
-          fontWeight: '500',
-        },
-        bule: {
-          fontSize: 22,
-          fontFamily: 'DINBold',
-          color: '#0454bf',
-          fontWeight: '700',
-        },
-        radius: {
-          width: 350,
-          height: 80,
-          // lineHeight:80,
-          borderWidth: 1,
-          borderColor: '#051c48',
-          fontSize: 50,
-          color: '#0454bf',
-          backgroundColor: '#051c48',
-          borderRadius: 20,
-          textAlign: 'center',
-        },
-        size: {
-          height: 400,
-          padding: [50, 0, 0, 0],
-        },
+
+      const updateData = () => {
+        let value = dataArr[0].value + 10;  // 每次增加的数值
+        if (value > 1000) {
+          value = 0;  // 当数值达到1000时重置为0
+        }
+        dataArr[0].value = value;
+        myChart.setOption({
+          series: [{
+            data: dataArr,
+          }],
+        });
       };
+
+      setInterval(updateData, 1000);  // 每隔一秒更新一次数据
+
       let option = {
         tooltip: {
           formatter: '{a} <br/>{b} : {c}%',
         },
-
         series: [
           {
             type: 'gauge',
@@ -369,10 +360,21 @@ export default {
                 var num = Math.round(value);
                 return '{bule|' + num + '}{white|%}';
               },
-              rich: rich,
+              rich: {
+                white: {
+                  fontSize: 10,
+                  color: '#0454bf',
+                  fontWeight: '500',
+                },
+                bule: {
+                  fontSize: 22,
+                  fontFamily: 'DINBold',
+                  color: '#0454bf',
+                  fontWeight: '700',
+                },
+              },
               offsetCenter: ['0%', '0%'],
             },
-
             data: dataArr,
             title: {
               show: true,
@@ -383,7 +385,13 @@ export default {
             axisLine: {
               show: true,
               lineStyle: {
-                color: colorSet,
+                color: [
+                  [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#0d4470' },
+                    { offset: 1, color: '#0659c9' }
+                  ])],
+                  [1, '#15337C'],
+                ],
                 width: 20,
                 shadowOffsetX: 0,
                 shadowOffsetY: 0,
@@ -409,10 +417,10 @@ export default {
         ],
       };
 
-      if (option) {
-        myChart.setOption(option);
-      }
+      myChart.setOption(option);
     },
+
+
     deviceOffline() {
       // 视频融合--离线设备
       // 基于准备好的dom，初始化echarts实例
@@ -528,6 +536,16 @@ export default {
       if (option) {
         myChart.setOption(option);
       }
+      let value = 0;
+      setInterval(() => {
+        value = value >= 1000 ? 0 : value + 5; // 数据从0开始往上涨，涨到1000再重新开始
+        dataArr1[0].value = value;
+        myChart.setOption({
+          series: [{
+            data: dataArr1
+          }]
+        });
+      }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
     }
   }
 };