Merge branch 'master' of http://116.142.80.13:3000/limeng/zhsq_qk_2.0

zhsq_qk-ui/src/router/index.js

@@ -50,8 +50,8 @@ export const constantRoutes = [
   //   }
   // },
   {
-    path: '/test',
-    component: () => import('@/views/fusion/test'),
+    path: '/qkmap',
+    component: () => import('@/views/supermap/qkmap.vue'),
     hidden: true
   },
   {

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

@@ -2,8 +2,9 @@
   <div>
     <div class="map">
       <!--            <img src="@/assets/images/qkq_mapbg.png"/>-->
-      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
-                :yxtSltProps="sltProps"></supermap>
+<!--      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"-->
+<!--                :yxtSltProps="sltProps"></supermap>-->
+      <qkmap ref="qkmap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"></qkmap>
     </div>
     <!-- 阴影背景 -->
     <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
@@ -12,10 +13,10 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
-      <div class="map_tab_zw">
-        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
-        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
-      </div>
+<!--      <div class="map_tab_zw">-->
+<!--        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>-->
+<!--        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>-->
+<!--      </div>-->
     </div>
     <!--头部结束-->
     <!-- 中间开始 -->
@@ -184,11 +185,12 @@ import "@/assets/images/qkq_body.css";
 import "@/assets/images/qkq_index.css";
 import "@/assets/images/qkq_sprh.css";
 import supermap from "@/views/supermap/supermap";
+import qkmap from "@/views/supermap/qkmap";
 
 
 export default {
   name: "yshj",
-  components: {supermap},
+  components: {supermap,qkmap},
   data() {
     return {
       sltProps: null,
@@ -1465,7 +1467,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 +1480,8 @@ export default {
         grid: {
           top: "5%",
           bottom: "20%",
-          right: "5%"
+          right: "5%",
+          left: "15%"
         },
         tooltip: {
           show: true,
@@ -1516,7 +1519,7 @@ export default {
             gridIndex: 0,
             min: 0,
             //max: 100,
-            interval: 50,
+            interval: 200,
             // splitNumber: 4,
             splitLine: {
               show: true,
@@ -1548,7 +1551,7 @@ export default {
           {
             name: "设备在线率",
             type: "bar",
-            barWidth: 8,
+            barWidth: 10,
             itemStyle: {
               normal: {
                 label: {
@@ -1576,6 +1579,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 +1618,7 @@ export default {
             symbolMargin: 6,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [18, 2],
+            symbolSize: [10, 2],
             symbolPosition: "start",
             symbolOffset: [1, 1],
             data: valueData,
@@ -1599,8 +1630,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 +1657,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 +1671,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);
       }

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

@@ -1,20 +1,23 @@
 <template>
-  <div id="chart-panel" style="width: 100%;height: 100%"></div>
+  <div id="chart-panel" ref="qkmap" style="width: 100%;height: 100%"></div>
 </template>
 <script setup>
 import * as echarts from "echarts";
-import qkmap from "@/assets/qkmap";
-import qcjd from "@/assets/qcjd";
-import jxjd from "@/assets/jxjd";
-import jcjd from "@/assets/jcjd";
-import gxjd from "@/assets/gxjd";
-import fmjd from "@/assets/fmjd";
-import dfjd from "@/assets/dfjd";
+import qkmap from "@/assets/qkmap.json";
+import qcjd from "@/assets/qcjd.json";
+import jxjd from "@/assets/jxjd.json";
+import jcjd from "@/assets/jcjd.json";
+import gxjd from "@/assets/gxjd.json";
+import fmjd from "@/assets/fmjd.json";
+import dfjd from "@/assets/dfjd.json";
 
 export default {
-  name: "test",
+  name: "qkmap",
   data() {
-    return {}
+    return {
+      //是否下钻
+      goDown: false
+    }
   },
   created() {
   },
@@ -25,10 +28,27 @@ export default {
     bmbjs() {
       let option;
       // 模拟点数据——数据点位无实际意义 仅供参考
-      var mapArr = {};
+      var geoCoordMap = {
+        '前程街道': [125.09604660214684, 43.83909453215667],
+        '东风街道': [125.09696957398383, 43.84313776848155],
+        '广兴街道': [125.21211984719847, 43.84244444235257],
+        '锦程街道': [125.23225751672716, 43.88166932271711],
+        '富民街道': [125.21874697097272, 43.85422355845459],
+        '锦绣街道': [125.25168911496968, 43.858309029810389],
+        '汽开区政务大厅': [125.26121514249364, 43.86525634142766],
+      }
       // 模拟动态修改点级别
       let arrZj = [];
-      let arrHz = [];
+
+      var data = [
+        {name: '前程街道', value: 239},
+        {name: '富民街道', value: 181},
+        {name: '广兴街道', value: 154},
+        {name: '东风街道', value: 135},
+        {name: '锦绣街道', value: 117},
+        {name: '锦程街道', value: 124},
+        {name: '汽开区政务大厅', value: 421},
+      ];
       echarts.extendsMap = function (id, opt) {
         // 实例
         var chart = this.init(document.getElementById(id));
@@ -46,6 +66,22 @@ export default {
           "2": "#f0fb30",
           "3": "#d11864",
         };
+
+        // 设置点方法
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value)
+              });
+            }
+          }
+          return res;
+        };
+
         var defaultOpt = {
           mapName: "qkmap", // 地图展示
           goDown: false, // 是否下钻
@@ -94,9 +130,6 @@ export default {
               o.graphic.push(breadcrumb);
               o.graphic[0].children[0].shape.x2 = 140;
               o.graphic[0].children[1].shape.x2 = 140;
-              // if (n === "杭州市") {
-              //   o.series[0].data = arrHz;
-              // }
               name.push(n)
               idx++;
             } else {
@@ -104,7 +137,7 @@ export default {
               if (o.graphic.length <= 2) {
                 o.graphic[0].children[0].shape.x2 = 50;
                 o.graphic[0].children[1].shape.x2 = 50;
-                o.series[0].data = arrZj;
+                // o.series[0].data = arrZj;
               }
               name.splice(j + 1, l);
               idx = j;
@@ -149,7 +182,6 @@ export default {
                   key: name,
                 },
                 onclick: function () {
-
                   var name = this.style.key;
                   handleEvents.resetOption(chart, option, name);
                 },
@@ -165,7 +197,6 @@ export default {
                     font: '12px "Microsoft YaHei", sans-serif',
                   },
                   onclick: function () {
-
                     var name = this.style.text;
                     handleEvents.resetOption(chart, option, name);
                   },
@@ -183,7 +214,6 @@ export default {
                     font: '10px "Microsoft YaHei", sans-serif',
                   },
                   onclick: function () {
-
                     var name = this.style.name;
                     handleEvents.resetOption(chart, option, name);
                   },
@@ -194,21 +224,6 @@ export default {
             return breadcrumb;
           },
 
-          // 设置effectscatter
-          // initSeriesData: function (data) {
-          //   var temp = [];
-          //   for (var i = 0; i < data.length; i++) {
-          //     var geoCoord = geoCoordMap[data[i].name];
-          //     if (geoCoord) {
-          //       temp.push({
-          //         name: data[i].name,
-          //         value: geoCoord.concat(data[i].value, data[i].level),
-          //       });
-          //     }
-          //   }
-          //   return temp;
-          // },
-
           zoomAnimation: function () {
             var count = null;
             var zoom = function (per) {
@@ -232,6 +247,12 @@ export default {
 
         option = {
           backgroundColor: "#336699",
+          tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+              return params.name + ' : ' + params.value;
+            }
+          },
           graphic: [{
             //标题的线
             type: "group",
@@ -323,8 +344,8 @@ export default {
           ],
           geo: {
             map: opt.mapName,
-            // roam: true, //是否缩放--在移动端无效
-            zoom: 1,
+            roam: true, //是否缩放--在移动端无效
+            zoom: 0.8,
             // selectedMode:true,  //多选地图区域
             label: {
               normal: {
@@ -405,29 +426,93 @@ export default {
               }
             }),
           },
-          series: [{
-            type: "effectScatter", //涟漪特效
-            coordinateSystem: "geo",
-            symbolSize: 5, //标记的大小
-            showEffectOn: "render",
-            rippleEffect: {
-              //涟漪特效相关配置。
-              period: 5, //动画的周期，秒数。
-              scale: 10, //波纹的最大缩放比例。
-              brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'。
-            },
-            hoverAnimation: true,
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  return levelColorMap[params.value[2]];
+          series: [
+            // {
+            //   name: 'light',
+            //   type: 'scatter',
+            //   coordinateSystem: 'geo',
+            //   data: convertData(data),
+            //   symbolSize: function (val) {
+            //     return val[2] / 10;
+            //   },
+            //   label: {
+            //     normal: {
+            //       formatter: '{b}',
+            //       position: 'right',
+            //       show: true
+            //     },
+            //     emphasis: {
+            //       show: true
+            //     }
+            //   },
+            //   itemStyle: {
+            //     normal: {
+            //       color: '#F4E925'
+            //     }
+            //   }
+            // },
+            {
+              type: 'map',
+              map: '汽开区',
+              geoIndex: 0,
+              aspectScale: 0.75, //长宽比
+              showLegendSymbol: false, // 存在legend时显示
+              label: {
+                normal: {
+                  show: false
+                },
+                emphasis: {
+                  show: false,
+                  textStyle: {
+                    color: '#fff'
+                  }
+                }
+              },
+              roam: true,
+              itemStyle: {
+                normal: {
+                  areaColor: '#031525',
+                  borderColor: '#FFFFFF',
                 },
-                shadowBlur: 5,
-                shadowColor: "#333",
+                emphasis: {
+                  areaColor: '#2B91B7'
+                }
               },
+              animation: false,
+              data: data
             },
-            data: arrZj,
-          },],
+            // {
+            //   name: 'Top 5',
+            //   type: 'effectScatter',
+            //   coordinateSystem: 'geo',
+            //   data: convertData(data.sort(function (a, b) {
+            //     return b.value - a.value;
+            //   }).slice(0, 5)),
+            //   symbolSize: function (val) {
+            //     return val[2] / 10;
+            //   },
+            //   showEffectOn: 'render',
+            //   rippleEffect: {
+            //     brushType: 'stroke'
+            //   },
+            //   hoverAnimation: true,
+            //   label: {
+            //     normal: {
+            //       formatter: '{b}',
+            //       position: 'right',
+            //       show: true
+            //     }
+            //   },
+            //   itemStyle: {
+            //     normal: {
+            //       color: '#F4E925',
+            //       shadowBlur: 10,
+            //       shadowColor: '#05C3F9'
+            //     }
+            //   },
+            //   zlevel: 1
+            // },
+          ]
         };
         chart.setOption(option);
         // 添加事件
@@ -460,45 +545,51 @@ export default {
                       shadowColor: "#333",
                     },
                   },
-                  data: mapArr[params.name]
+                  data: geoCoordMap[params.name]
                 },],
               });
             }
           }
         });
-
-        chart.on("mouseover", function (params) {
-          var city = params.name; //当前城市
-          $("#hoverBox").css();
-          $("#hoverBox").html(city);
-          $("#hoverBox").show();
-          var layerX = params.event.offsetX;
-          var layerY = params.event.offsetY;
-          $("#hoverBox").css({
-            top: layerY + 10,
-            left: layerX + 10,
-          });
-          console.log("params.name",params)
-        });
-        chart.on("mouseout", function (params) {
-          $("#hoverBox").hide();
-        });
         return chart;
       };
 
       echarts.registerMap("汽开区", qkmap);
       var myChart = echarts.extendsMap("chart-panel", {
         mapName: "汽开区", // 地图名
-        goDown: true, // 是否下钻
+        goDown: this.goDown, // 是否下钻
         // 下钻回调
         callback: function (name, option, instance) {
         },
         // 数据展示
-        data: arrZj
+        data: data
       });
+      let timeOut4 = null
+      clearInterval(timeOut4)
+      myChart.clear();
       if (option) {
         myChart.setOption(option);
       }
+      var currentIndex = -1;
+      timeOut4 = setInterval(() => {
+        var dataLen = option.series[0].data.length;
+        myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: currentIndex
+        });
+        currentIndex = (currentIndex + 1) % dataLen;
+        myChart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: currentIndex,
+        });
+        myChart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: currentIndex
+        });
+      }, 1500)
     }
   }
 }

zhsq_qk-ui/src/views/supermap/supermap.vue

@@ -298,7 +298,7 @@ export default {
       //创建聚散图层并添加layers
       let marker = [];
       let resultLayer = L.markerClusterGroup({
-        showCoverageOnHover: true,
+        showCoverageOnHover: false,
         zoomToBoundsOnClick: true,
         animateAddingMarkers: true,
         spiderfyOnMaxZoom: true