1

src/views/KHC.vue

@@ -15,8 +15,8 @@
             <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
           </ul>
           <div class="bottom">
-            <div class="bottomBox">
-              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
               <div>
                 <p>用电量(MWH)</p>
                 <p><span>84.00</span><span>-13.20%</span></p>
@@ -131,6 +131,7 @@
 </template>
 <script>
 import * as echarts from "echarts";
+import { contain } from "postcss-pxtorem/lib/filter-prop-list";
 export default {
   data() {
     return {
@@ -921,18 +922,75 @@ 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: 4, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 10, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
             {
               tooltip: {
                 trigger: "item",
                 // show: false,
               },
-
               name: "山东",
               type: "map",
               map: "山东",
@@ -951,6 +1009,7 @@ export default {
               },
               label: {
                 show: true, //是否显示市
+                zlevel: 4,
                 formatter: function (params) {
                   var name = params.name;
                   var value = params.value;
@@ -962,9 +1021,10 @@ export default {
                   fontSize: "0.08rem", //文字大小
                   fontFamily: "微软雅黑",
                   // backgroundColor: {
-                  //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
                   // },
-                  // padding: [15, 20],
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
                 },
                 rich: {
                   fline: {
@@ -1026,6 +1086,8 @@ export default {
           animation: true,
         };
 
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
         myChart.setOption(option);
         myChart.on("click", chartClick);
         //点击地图区域事件
@@ -1253,15 +1315,16 @@ export default {
     margin-bottom: 10px;
 
     p {
-      width: 527px;
       height: 47px;
       font-size: 44px;
-      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-family: "Alibaba PuHuiTi";
       font-weight: 600;
       line-height: 47px;
-      letter-spacing: 3px;
+      letter-spacing: 6px;
       color: #fff;
-      margin-left: -60px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
     }
 
     img:nth-of-type(1) {
@@ -1338,7 +1401,11 @@ export default {
           margin-top: 100px;
           display: flex;
           flex-wrap: wrap;
-
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
           .bottomBox {
             display: flex;
             align-items: center;