修改

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

@@ -230,6 +230,7 @@ export default {
     toggleDropdown(event) {
       this.dropdownVisible = !this.dropdownVisible;
     },
+
     resourceDistribution() {
       //资源分布
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
@@ -360,235 +361,724 @@ export default {
         myChart.setOption(option);
       }
     },
+
     deviceOnline() {
       //在线设备
       var myChart = echarts.init(document.getElementById('sprh-zxfb'));
-      const dataArr = [
-        {
-          value: 0,  // 初始值设为0
-          name: '在线',
-        },
-      ];
-
-      const updateData = () => {
-        let value = dataArr[0].value + 10;  // 每次增加的数值
-        if (value > 500) {
-          value = 0;  // 当数值达到1000时重置为0
-        }
-        dataArr[0].value = value;
-        myChart.setOption({
-          series: [{
-            data: dataArr,
-          }],
-        });
-      };
-
-      setInterval(updateData, 1000);  // 每隔一秒更新一次数据
-
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = 80;
+      var timerId;
       let option = {
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c}%',
+        title: {
+          text: '{a|' + value + '}{c|%}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 24,
+                color: '#29EEF3'
+              },
+
+              c: {
+                fontSize: 16,
+                color: '#ffffff',
+                // padding: [5,0]
+              }
+            }
+          }
         },
         series: [
+          // 紫色
           {
-            type: 'gauge',
-            radius: '90%',
-            startAngle: '225',
-            endAngle: '-45',
-            pointer: {
-              show: false,
-            },
-            detail: {
-              formatter: function (value) {
-                var num = Math.round(value);
-                return '{bule|' + num + '}{white|%}';
-              },
-              rich: {
-                white: {
-                  fontSize: 10,
-                  color: '#0463df',
-                  fontWeight: '500',
-                },
-                bule: {
-                  fontSize: 22,
-                  fontFamily: 'DINBold',
-                  color: '#06bcf3',
-                  fontWeight: '700',
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (0 + angle) * Math.PI / 180,
+                  endAngle: (90 + angle) * Math.PI / 180
                 },
-              },
-              offsetCenter: ['0%', '0%'],
+                style: {
+                  stroke: "#8383FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            data: dataArr,
-            title: {
-              show: true,
-              color: '#06bcf3',
-              offsetCenter: ['0', '75%'],
-              fontSize: 14
+            data: [0]
+          }, {
+            name: "ring5", //紫点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (90 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#8450F9", //绿
+                  fill: "#8450F9"
+                },
+                silent: true
+              };
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: [
-                  [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    {offset: 0, color: '#0e2c7f'},
-                    {offset: 1, color: '#06bcf3'}
-                  ])],
-                  [1, '#142b7c'],
-                ],
-                width: 20,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                opacity: 1,
-              },
+            data: [0]
+          },
+          // 蓝色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (180 + angle) * Math.PI / 180,
+                  endAngle: (270 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#4386FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisTick: {
-              show: false,
+            data: [0]
+          },
+          {
+            name: "ring5", // 蓝色
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (180 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#4386FA", //绿
+                  fill: "#4386FA"
+                },
+                silent: true
+              };
             },
-            splitLine: {
-              show: false,
-              length: 35,
-              lineStyle: {
-                color: '#142b7c',
-                width: 2,
-                type: 'solid',
-              },
+            data: [0]
+          },
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (270 + -angle) * Math.PI / 180,
+                  endAngle: (40 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisLabel: {
-              show: false,
+            data: [0]
+          },
+          // 橘色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (90 + -angle) * Math.PI / 180,
+                  endAngle: (220 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#FF8E89",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
+            data: [0]
+          }, {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (90 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#FF8E89", //粉
+                  fill: "#FF8E89"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: "ring5", //绿点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (270 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: '设备在线率',
+            type: 'pie',
+            radius: ['72%', '55%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#A098FC' // 0% 处的颜色
+                    },
+                      {
+                        offset: 0.3,
+                        color: '#4386FA' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.6,
+                        color: '#4FADFD' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.8,
+                        color: '#0CD3DB' // 100% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: '设备在线率',
+            type: 'pie',
+            radius: ['52%', '45%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 270,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#00EDF3' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#646CF9' // 100% 处的颜色
+                    }]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
           },
-        ],
+        ]
       };
 
+      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+      function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+        return {
+          x: x1,
+          y: y1
+        }
+      }
+      function draw() {
+        angle = angle + 3
+        myChart.setOption(option, true)
+        //window.requestAnimationFrame(draw);
+      }
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      timerId = setInterval(function() {
+        //用setInterval做动画感觉有问题
+        draw()
+      }, 100);
+
       myChart.setOption(option);
     },
 
-
     deviceOffline() {
       // 视频融合--离线设备
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('sprh-lxfb'));
-      const dataArr1 = [
-        {
-          value: 39,
-          name: '离线',
-        },
-      ];
-      const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        {
-          offset: 0,
-          color: '#a86e11', // 0% 处的颜色
-        },
-        {
-          offset: 1,
-          color: '#e1c700', // 100% 处的颜色
-        },
-      ]);
-      const colorSet1 = [
-        [0.39, color1],
-        [1, '#15337C'],
-      ];
-      const rich1 = {
-        white: {
-          fontSize: 10,
-          color: '#a89e0f',
-          fontWeight: '500',
-        },
-        bule: {
-          fontSize: 22,
-          fontFamily: 'DINBold',
-          color: '#a89e0f',
-          fontWeight: '700',
-        },
-        radius: {
-          width: 350,
-          height: 80,
-          // lineHeight:80,
-          borderWidth: 1,
-          borderColor: '#051c48',
-          fontSize: 50,
-          color: '#a89e0f',
-          backgroundColor: '#051c48',
-          borderRadius: 20,
-          textAlign: 'center',
-        },
-        size: {
-          height: 400,
-          padding: [50, 0, 0, 0],
-        },
-      };
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = 20;
+      var timerId;
       let option = {
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c}%',
-        },
+        title: {
+          text: '{a|' + value + '}{c|%}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 24,
+                color: '#29EEF3'
+              },
 
+              c: {
+                fontSize: 16,
+                color: '#ffffff',
+                // padding: [5,0]
+              }
+            }
+          }
+        },
         series: [
+          // 紫色
           {
-            type: 'gauge',
-            radius: '90%',
-            startAngle: '225',
-            endAngle: '-45',
-            pointer: {
-              show: false,
-            },
-            detail: {
-              formatter: function (value) {
-                var num = Math.round(value);
-                return '{bule|' + num + '}{white|%}';
-              },
-              rich: rich1,
-              offsetCenter: ['0%', '0%'],
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (0 + angle) * Math.PI / 180,
+                  endAngle: (90 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#8383FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-
-            data: dataArr1,
-            title: {
-              show: true,
-              color: '#ae8609',
-              offsetCenter: ['0', '75%'],
-              fontSize: 14
+            data: [0]
+          }, {
+            name: "ring5", //紫点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (90 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#8450F9", //绿
+                  fill: "#8450F9"
+                },
+                silent: true
+              };
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: colorSet1,
-                width: 20,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                opacity: 1,
-              },
+            data: [0]
+          },
+          // 蓝色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (180 + angle) * Math.PI / 180,
+                  endAngle: (270 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#4386FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisTick: {
-              show: false,
+            data: [0]
+          },
+          {
+            name: "ring5", // 蓝色
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (180 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#4386FA", //绿
+                  fill: "#4386FA"
+                },
+                silent: true
+              };
             },
-            splitLine: {
-              show: false,
-              length: 35,
-              lineStyle: {
-                color: '#051c48',
-                width: 2,
-                type: 'solid',
-              },
+            data: [0]
+          },
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (270 + -angle) * Math.PI / 180,
+                  endAngle: (40 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisLabel: {
-              show: false,
+            data: [0]
+          },
+          // 橘色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (90 + -angle) * Math.PI / 180,
+                  endAngle: (220 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#FF8E89",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
+            data: [0]
+          }, {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (90 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#FF8E89", //粉
+                  fill: "#FF8E89"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: "ring5", //绿点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (270 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: '设备离线率',
+            type: 'pie',
+            radius: ['72%', '55%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#A098FC' // 0% 处的颜色
+                    },
+                      {
+                        offset: 0.3,
+                        color: '#4386FA' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.6,
+                        color: '#4FADFD' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.8,
+                        color: '#0CD3DB' // 100% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: '设备离线率',
+            type: 'pie',
+            radius: ['52%', '45%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 270,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#00EDF3' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#646CF9' // 100% 处的颜色
+                    }]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
           },
-        ],
+        ]
       };
 
-      if (option) {
-        myChart.setOption(option);
+      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+      function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+        return {
+          x: x1,
+          y: y1
+        }
       }
-      let value = 0;
-      setInterval(() => {
-        value = value >= 1000 ? 0 : value + 5; // 数据从0开始往上涨，涨到1000再重新开始
-        dataArr1[0].value = value;
-        myChart.setOption({
-          series: [{
-            data: dataArr1
-          }]
-        });
-      }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
+      function draw() {
+        angle = angle + 3
+        myChart.setOption(option, true)
+        //window.requestAnimationFrame(draw);
+      }
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      timerId = setInterval(function() {
+        //用setInterval做动画感觉有问题
+        draw()
+      }, 100);
+
+      myChart.setOption(option);
     },
 
     getCurrentTime() {

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

@@ -229,6 +229,7 @@ export default {
     toggleDropdown(event) {
       this.dropdownVisible = !this.dropdownVisible;
     },
+
     resourceDistribution() {
       //资源分布
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
@@ -359,106 +360,363 @@ export default {
         myChart.setOption(option);
       }
     },
+
     deviceOnline() {
       //在线设备
       var myChart = echarts.init(document.getElementById('sprh-zxfb'));
-      const dataArr = [
-        {
-          value: 0,  // 初始值设为0
-          name: '在线',
-        },
-      ];
-
-      const updateData = () => {
-        let value = dataArr[0].value + 10;  // 每次增加的数值
-        if (value > 500) {
-          value = 0;  // 当数值达到1000时重置为0
-        }
-        dataArr[0].value = value;
-        myChart.setOption({
-          series: [{
-            data: dataArr,
-          }],
-        });
-      };
-
-      setInterval(updateData, 1000);  // 每隔一秒更新一次数据
-
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = 80;
+      var timerId;
       let option = {
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c}%',
+        title: {
+          text: '{a|' + value + '}{c|%}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 24,
+                color: '#29EEF3'
+              },
+
+              c: {
+                fontSize: 16,
+                color: '#ffffff',
+                // padding: [5,0]
+              }
+            }
+          }
         },
         series: [
+          // 紫色
           {
-            type: 'gauge',
-            radius: '90%',
-            startAngle: '225',
-            endAngle: '-45',
-            pointer: {
-              show: false,
-            },
-            detail: {
-              formatter: function (value) {
-                var num = Math.round(value);
-                return '{bule|' + num + '}{white|%}';
-              },
-              rich: {
-                white: {
-                  fontSize: 10,
-                  color: '#0463df',
-                  fontWeight: '500',
-                },
-                bule: {
-                  fontSize: 22,
-                  fontFamily: 'DINBold',
-                  color: '#06bcf3',
-                  fontWeight: '700',
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (0 + angle) * Math.PI / 180,
+                  endAngle: (90 + angle) * Math.PI / 180
                 },
-              },
-              offsetCenter: ['0%', '0%'],
+                style: {
+                  stroke: "#8383FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            data: dataArr,
-            title: {
-              show: true,
-              color: '#06bcf3',
-              offsetCenter: ['0', '75%'],
-              fontSize: 14
+            data: [0]
+          }, {
+            name: "ring5", //紫点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (90 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#8450F9", //绿
+                  fill: "#8450F9"
+                },
+                silent: true
+              };
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: [
-                  [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    {offset: 0, color: '#0e2c7f'},
-                    {offset: 1, color: '#06bcf3'}
-                  ])],
-                  [1, '#142b7c'],
-                ],
-                width: 20,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                opacity: 1,
-              },
+            data: [0]
+          },
+          // 蓝色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (180 + angle) * Math.PI / 180,
+                  endAngle: (270 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#4386FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisTick: {
-              show: false,
+            data: [0]
+          },
+          {
+            name: "ring5", // 蓝色
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (180 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#4386FA", //绿
+                  fill: "#4386FA"
+                },
+                silent: true
+              };
             },
-            splitLine: {
-              show: false,
-              length: 35,
-              lineStyle: {
-                color: '#142b7c',
-                width: 2,
-                type: 'solid',
-              },
+            data: [0]
+          },
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (270 + -angle) * Math.PI / 180,
+                  endAngle: (40 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisLabel: {
-              show: false,
+            data: [0]
+          },
+          // 橘色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (90 + -angle) * Math.PI / 180,
+                  endAngle: (220 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#FF8E89",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
+            data: [0]
+          }, {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (90 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#FF8E89", //粉
+                  fill: "#FF8E89"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: "ring5", //绿点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (270 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: '设备在线率',
+            type: 'pie',
+            radius: ['72%', '55%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#A098FC' // 0% 处的颜色
+                    },
+                      {
+                        offset: 0.3,
+                        color: '#4386FA' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.6,
+                        color: '#4FADFD' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.8,
+                        color: '#0CD3DB' // 100% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: '设备在线率',
+            type: 'pie',
+            radius: ['52%', '45%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 270,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#00EDF3' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#646CF9' // 100% 处的颜色
+                    }]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
           },
-        ],
+        ]
       };
 
+      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+      function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+        return {
+          x: x1,
+          y: y1
+        }
+      }
+      function draw() {
+        angle = angle + 3
+        myChart.setOption(option, true)
+        //window.requestAnimationFrame(draw);
+      }
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      timerId = setInterval(function() {
+        //用setInterval做动画感觉有问题
+        draw()
+      }, 100);
+
       myChart.setOption(option);
     },
 
@@ -466,127 +724,360 @@ export default {
       // 视频融合--离线设备
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('sprh-lxfb'));
-      const dataArr1 = [
-        {
-          value: 39,
-          name: '离线',
-        },
-      ];
-      const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        {
-          offset: 0,
-          color: '#a86e11', // 0% 处的颜色
-        },
-        {
-          offset: 1,
-          color: '#e1c700', // 100% 处的颜色
-        },
-      ]);
-      const colorSet1 = [
-        [0.39, color1],
-        [1, '#15337C'],
-      ];
-      const rich1 = {
-        white: {
-          fontSize: 10,
-          color: '#a89e0f',
-          fontWeight: '500',
-        },
-        bule: {
-          fontSize: 22,
-          fontFamily: 'DINBold',
-          color: '#a89e0f',
-          fontWeight: '700',
-        },
-        radius: {
-          width: 350,
-          height: 80,
-          // lineHeight:80,
-          borderWidth: 1,
-          borderColor: '#051c48',
-          fontSize: 50,
-          color: '#a89e0f',
-          backgroundColor: '#051c48',
-          borderRadius: 20,
-          textAlign: 'center',
-        },
-        size: {
-          height: 400,
-          padding: [50, 0, 0, 0],
-        },
-      };
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = 20;
+      var timerId;
       let option = {
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c}%',
-        },
+        title: {
+          text: '{a|' + value + '}{c|%}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 24,
+                color: '#29EEF3'
+              },
 
+              c: {
+                fontSize: 16,
+                color: '#ffffff',
+                // padding: [5,0]
+              }
+            }
+          }
+        },
         series: [
+          // 紫色
           {
-            type: 'gauge',
-            radius: '90%',
-            startAngle: '225',
-            endAngle: '-45',
-            pointer: {
-              show: false,
-            },
-            detail: {
-              formatter: function (value) {
-                var num = Math.round(value);
-                return '{bule|' + num + '}{white|%}';
-              },
-              rich: rich1,
-              offsetCenter: ['0%', '0%'],
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (0 + angle) * Math.PI / 180,
+                  endAngle: (90 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#8383FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-
-            data: dataArr1,
-            title: {
-              show: true,
-              color: '#ae8609',
-              offsetCenter: ['0', '75%'],
-              fontSize: 14
+            data: [0]
+          }, {
+            name: "ring5", //紫点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (90 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#8450F9", //绿
+                  fill: "#8450F9"
+                },
+                silent: true
+              };
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: colorSet1,
-                width: 20,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                opacity: 1,
-              },
+            data: [0]
+          },
+          // 蓝色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
+                  startAngle: (180 + angle) * Math.PI / 180,
+                  endAngle: (270 + angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#4386FA",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisTick: {
-              show: false,
+            data: [0]
+          },
+          {
+            name: "ring5", // 蓝色
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
+              let point = getCirlPoint(x0, y0, r, (180 + angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#4386FA", //绿
+                  fill: "#4386FA"
+                },
+                silent: true
+              };
             },
-            splitLine: {
-              show: false,
-              length: 35,
-              lineStyle: {
-                color: '#051c48',
-                width: 2,
-                type: 'solid',
-              },
+            data: [0]
+          },
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (270 + -angle) * Math.PI / 180,
+                  endAngle: (40 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          // 橘色
+          {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
+                  startAngle: (90 + -angle) * Math.PI / 180,
+                  endAngle: (220 + -angle) * Math.PI / 180
+                },
+                style: {
+                  stroke: "#FF8E89",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
             },
-            axisLabel: {
-              show: false,
+            data: [0]
+          }, {
+            name: "ring5",
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (90 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#FF8E89", //粉
+                  fill: "#FF8E89"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: "ring5", //绿点
+            type: 'custom',
+            coordinateSystem: "none",
+            renderItem: function(params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
+              let point = getCirlPoint(x0, y0, r, (270 + -angle))
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          }, {
+            name: '设备离线率',
+            type: 'pie',
+            radius: ['72%', '55%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#A098FC' // 0% 处的颜色
+                    },
+                      {
+                        offset: 0.3,
+                        color: '#4386FA' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.6,
+                        color: '#4FADFD' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.8,
+                        color: '#0CD3DB' // 100% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
+                  },
+                }
+              }
             },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: '设备离线率',
+            type: 'pie',
+            radius: ['52%', '45%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 270,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+
+              }
+            },
+            data: [{
+              value: value,
+              name: "",
+              itemStyle: {
+                normal: {
+                  color: { // 完成的圆环的颜色
+                    colorStops: [{
+                      offset: 0,
+                      color: '#00EDF3' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#646CF9' // 100% 处的颜色
+                    }]
+                  },
+                }
+              }
+            },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
           },
-        ],
+        ]
       };
 
-      if (option) {
-        myChart.setOption(option);
+      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+      function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+        return {
+          x: x1,
+          y: y1
+        }
       }
-      let value = 0;
-      setInterval(() => {
-        value = value >= 1000 ? 0 : value + 5; // 数据从0开始往上涨，涨到1000再重新开始
-        dataArr1[0].value = value;
-        myChart.setOption({
-          series: [{
-            data: dataArr1
-          }]
-        });
-      }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
+      function draw() {
+        angle = angle + 3
+        myChart.setOption(option, true)
+        //window.requestAnimationFrame(draw);
+      }
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      timerId = setInterval(function() {
+        //用setInterval做动画感觉有问题
+        draw()
+      }, 100);
+
+      myChart.setOption(option);
     },
 
     getCurrentTime() {
@@ -608,6 +1099,7 @@ export default {
 
       this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
     },
+
     regionTop() {
       //摄像头统计
       var myChart = echarts.init(document.getElementById('jczl-bmfw'));

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

@@ -1465,7 +1465,7 @@ export default {
     },
     bmyql() {
       var myChart = echarts.init(document.getElementById('bmyql'));
-      let data = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门']
+      let data = ['xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门']
       let valueData = [];
       let labelData = []
       for (var i = 0; i < data.length; i++) {
@@ -1478,7 +1478,8 @@ export default {
         grid: {
           top: "5%",
           bottom: "20%",
-          right: "5%"
+          right: "5%",
+          left: "15%"
         },
         tooltip: {
           show: true,
@@ -1516,7 +1517,7 @@ export default {
             gridIndex: 0,
             min: 0,
             //max: 100,
-            interval: 50,
+            interval: 200,
             // splitNumber: 4,
             splitLine: {
               show: true,
@@ -1548,7 +1549,7 @@ export default {
           {
             name: "设备在线率",
             type: "bar",
-            barWidth: 8,
+            barWidth: 10,
             itemStyle: {
               normal: {
                 label: {
@@ -1576,6 +1577,34 @@ export default {
             zlevel: 0
           },
           {
+            name: "设备在线率",
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: valueData.map((item, index) => {
+              return {
+                coords: [
+                  [index, 0],
+                  [index, item - 4]
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [10, 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
+            },
+            z: 99
+          },
+          {
             // 分隔
             type: "pictorialBar",
             itemStyle: {
@@ -1587,7 +1616,7 @@ export default {
             symbolMargin: 6,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [18, 2],
+            symbolSize: [10, 2],
             symbolPosition: "start",
             symbolOffset: [1, 1],
             data: valueData,
@@ -1599,8 +1628,8 @@ export default {
             name: "外框",
             type: "bar",
             barGap: "-110%", // 设置外框粗细
-            data: [100, 100, 100, 100, 100, 100, 100],
-            barWidth: 16,
+            data: valueData,
+            barWidth: 10,
             itemStyle: {
               normal: {
                 color: "transparent", // 填充色
@@ -1626,7 +1655,7 @@ export default {
             areaStyle: {
               color: "rgba(0, 151, 251, 0.1)"
             },
-            data: [498, 520, 568, 432, 464, 332, 344, 458, 470, 468, 398, 310, 421],
+            data: valueData,
             z: 5
           }
         ],
@@ -1640,26 +1669,6 @@ export default {
         //   }
         // ]
       }
-      var currentIndex = -1;
-      var timer = setInterval(function () {
-        // 生成新的随机数据
-        currentIndex++;
-        if (currentIndex >= 12) {
-          currentIndex = 0;
-          for (var i = 0; i < valueData.length; i++) {
-            valueData[i] = Math.floor(Math.random() * 700);
-          }
-        } else {
-          valueData[currentIndex] = Math.floor(Math.random() * 700);
-        }
-
-        // 更新 option 中的数据
-        option.series[0].data = valueData;
-
-        // 重新渲染图表
-        myChart.setOption(option);
-      }, 1000); // 每秒更新一次数据
-
       if (option) {
         myChart.setOption(option);
       }