zyh

src/views/KHC.vue

@@ -988,7 +988,9 @@ export default {
                   color: "#D8C74A",
                 },
               },
-              data: [],
+              data: [
+                
+              ],
             },
             {
               tooltip: {
@@ -1208,30 +1210,30 @@ export default {
       };
       // series
       const series = [
-        {
+        // {
-          z: 2,
+        //   z: 2,
-          name: "底部",
+        //   name: "底部",
-          type: "pictorialBar",
+        //   type: "pictorialBar",
-          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
-          symbol: "diamond",
+        //   symbol: "diamond",
-          symbolOffset: [0, "50%"],
+        //   symbolOffset: [0, "50%"],
-          symbolSize: [18, 12],
+        //   symbolSize: [18, 12],
-          itemStyle: {
+        //   itemStyle: {
-            color: {
+        //     color: {
-              type: "linear",
+        //       type: "linear",
-              x: 0,
+        //       x: 0,
-              x2: 1,
+        //       x2: 1,
-              y: 0,
+        //       y: 0,
-              y2: 0,
+        //       y2: 0,
-              colorStops: [
+        //       colorStops: [
-                { offset: 0, color: "rgba(27, 126, 242, 1)" },
+        //         { offset: 0, color: "rgba(27, 126, 242, 1)" },
-                { offset: 0.5, color: "rgba(27, 126, 242, 1)" },
+        //         { offset: 0.5, color: "rgba(27, 126, 242, 1)" },
-                { offset: 0.5, color: "rgba(27, 126, 242, .7)" },
+        //         { offset: 0.5, color: "rgba(27, 126, 242, .7)" },
-                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
-              ],
+        //       ],
-            },
+        //     },
-          },
+        //   },
-        },
+        // },
         {
           z: 3,
           name: "上部1",
@@ -1240,7 +1242,7 @@ export default {
           data: dataArr.disinfeced,
           symbol: "diamond",
           symbolOffset: [0, "-50%"],
-          symbolSize: ["0.09rem", "0.06rem"],
+          symbolSize: [18, 12],
           label: {
             normal: {
               show: true,
@@ -1255,13 +1257,13 @@ export default {
           },
           itemStyle: {
             borderColor: "#28F1FA",
-            borderWidth: 2,
+            borderWidth: 4,
             color: "#28F1FA",
           },
         },
         {
           z: 1,
-          stack: "总量",
+          stack: "",
           type: "bar",
           name: "电费",
           barWidth: 18,

src/views/TAN.vue

@@ -1395,7 +1395,6 @@ export default {
       let src = require("../assets/shandong.json");
       function registerMap() {
         echarts.registerMap("山东", src);
-
         //拿到json数据
         var mapFeatures = echarts.getMap("山东").geoJson.features;
         var geoCoordMap = {};
@@ -1440,9 +1439,9 @@ export default {
               zlevel: 3,
               rippleEffect: {
                 //涟漪特效
-                period: 4, //动画时间，值越小速度越快
+                period: 3, //动画时间，值越小速度越快
                 brushType: "fill", //波纹绘制方式 stroke, fill
-                scale: 10, //波纹圆环最大限制，值越大波纹越大
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
               },
               symbol: "circle",
               symbolSize: 7,

src/views/XQXY.vue

@@ -1137,12 +1137,69 @@ export default {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-      //获取山东地图数据。
+
+      //注入山东地图数据。
       let src = require("../assets/shandong.json");
       function registerMap() {
         echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        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;
+        };
         let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
           series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
             {
               tooltip: {
                 trigger: "item",
@@ -1160,12 +1217,13 @@ export default {
                   borderWidth: 2, // 高亮时的边框宽度
                 },
                 label: {
-                  fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
                   color: "#fff",
                 },
               },
               label: {
                 show: true, //是否显示市
+                zlevel: 4,
                 formatter: function (params) {
                   var name = params.name;
                   var value = params.value;
@@ -1174,24 +1232,25 @@ export default {
                 },
                 textStyle: {
                   color: "#000", //文字颜色
-                  fontSize: "0.0833rem", //文字大小
+                  fontSize: "0.08rem", //文字大小
                   fontFamily: "微软雅黑",
                   // backgroundColor: {
-                  //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
                   // },
-                  // padding: [15, 20],
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
                 },
                 rich: {
                   fline: {
                     padding: [0, 35],
                     color: "#FDCC00",
-                    fontSize: "0.0729rem",
+                    fontSize: "0.07rem",
                     fontWeight: 600,
                   },
                   tline: {
                     padding: [0, 27],
                     color: "#fff",
-                    fontSize: "0.0625rem",
+                    fontSize: "0.06rem",
                   },
                 },
               },
@@ -1241,6 +1300,8 @@ export default {
           animation: true,
         };
 
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
         myChart.setOption(option);
         myChart.on("click", chartClick);
         //点击地图区域事件

src/views/ZHDY.vue

@@ -1174,12 +1174,69 @@ export default {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-      //获取山东地图数据。
+
+      //注入山东地图数据。
       let src = require("../assets/shandong.json");
       function registerMap() {
         echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        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;
+        };
         let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
           series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
             {
               tooltip: {
                 trigger: "item",
@@ -1197,13 +1254,13 @@ export default {
                   borderWidth: 2, // 高亮时的边框宽度
                 },
                 label: {
-                  // fontSize: 12, // 选中地图文字字号和字体颜色
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
-                  fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
                   color: "#fff",
                 },
               },
               label: {
                 show: true, //是否显示市
+                zlevel: 4,
                 formatter: function (params) {
                   var name = params.name;
                   var value = params.value;
@@ -1212,27 +1269,25 @@ export default {
                 },
                 textStyle: {
                   color: "#000", //文字颜色
-                  // fontSize: 16, //文字大小
+                  fontSize: "0.08rem", //文字大小
-                  fontSize: "0.0833rem", //文字大小
                   fontFamily: "微软雅黑",
                   // backgroundColor: {
-                  //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
                   // },
-                  // padding: [15, 20],
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
                 },
                 rich: {
                   fline: {
                     padding: [0, 35],
                     color: "#FDCC00",
-                    // fontSize: 14,
+                    fontSize: "0.07rem",
-                    fontSize: "0.0729rem",
                     fontWeight: 600,
                   },
                   tline: {
                     padding: [0, 27],
                     color: "#fff",
-                    // fontSize: 12,
+                    fontSize: "0.06rem",
-                    fontSize: "0.0625rem",
                   },
                 },
               },
@@ -1282,6 +1337,8 @@ export default {
           animation: true,
         };
 
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
         myChart.setOption(option);
         myChart.on("click", chartClick);
         //点击地图区域事件