12

src/views/KHC.vue

@@ -2,7 +2,9 @@
   <div class="box">
     <div class="title">
       <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
-      <p>客户侧总体用能情况分析</p>
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
       <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
     </div>
     <div class="containter">
@@ -131,7 +133,6 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import { contain } from "postcss-pxtorem/lib/filter-prop-list";
 export default {
   data() {
     return {
@@ -413,7 +414,7 @@ export default {
       } else if (index == 1) {
         return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
       } else if (index == 2) {
-        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#44324B;';
       }
     },
     defineEcharts(dom, option) {
@@ -1305,26 +1306,36 @@ export default {
   .title {
     width: 100%;
     height: 76px;
-    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+
-    background-position: center center;
+    // margin: 0 auto;
-    background-repeat: no-repeat;
-    background-size: cover;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
-
+    .title_tit {
-    p {
+      width: 1600px;
-      height: 47px;
+      height: 100%;
-      font-size: 44px;
+      display: flex;
-      font-family: "Alibaba PuHuiTi";
+      align-items: center;
-      font-weight: 600;
+      justify-content: space-between;
-      line-height: 47px;
+      background: url(../assets/tan/分组\ 7.png);
-      letter-spacing: 6px;
+      background-position: center center;
-      color: #fff;
+      background-repeat: no-repeat;
-      position: absolute;
+      background-size: cover;
-      left: 50%;
+      text-align: center;
-      transform: translateX(-50%);
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
     }
 
     img:nth-of-type(1) {

src/views/TAN.vue

@@ -1390,13 +1390,70 @@ export default {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-      //获取山东地图数据。
-      let src = require("../assets/shandong.json");
 
+      //注入山东地图数据。
+      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",
@@ -1414,42 +1471,13 @@ export default {
                   borderWidth: 2, // 高亮时的边框宽度
                 },
                 label: {
-                  show: true, //是否显示市
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
-                  formatter: function (params) {
+                  color: "#fff",
-                    var name = params.name;
-                    var value = params.value;
-                    var text = ` {fline|${value}}\n{tline|${name}} `;
-                    return text;
-                  },
-                  textStyle: {
-                    color: "#000", //文字颜色
-                    // fontSize: 16, //文字大小
-                    fontSize: "0.0833rem", //文字大小
-                    fontFamily: "微软雅黑",
-                    // backgroundColor: {
-                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
-                    // },
-                    // padding: [15, 20],
-                  },
-                  rich: {
-                    fline: {
-                      padding: [0, 35],
-                      color: "#FDCC00",
-                      // fontSize: 14,
-                      fontSize: "0.0729rem",
-                      fontWeight: 600,
-                    },
-                    tline: {
-                      padding: [0, 27],
-                      color: "#fff",
-                      // fontSize: 12,
-                      fontSize: "0.0625rem",
-                    },
-                  },
                 },
               },
               label: {
                 show: true, //是否显示市
+                zlevel: 4,
                 formatter: function (params) {
                   var name = params.name;
                   var value = params.value;
@@ -1458,27 +1486,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",
                   },
                 },
               },
@@ -1528,6 +1554,8 @@ export default {
           animation: true,
         };
 
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
         myChart.setOption(option);
         myChart.on("click", chartClick);
         //点击地图区域事件
@@ -1761,20 +1789,19 @@ export default {
       background-size: cover;
       text-align: center;
       p {
-      width: 527px;
+        width: 527px;
-      height: 47px;
+        height: 47px;
-      font-size: 44px;
+        font-size: 44px;
-      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
-      font-weight: 600;
+        font-weight: 600;
-      text-align: center;
+        text-align: center;
-      line-height: 47px;
+        line-height: 47px;
-      letter-spacing: 3px;
+        letter-spacing: 3px;
-      color: #fff;
+        color: #fff;
-      margin-left: 490px;
+        margin-left: 490px;
-      // margin-left: -50px;
+        // margin-left: -50px;
+      }
     }
-    }
-
 
     img:nth-of-type(1) {
       width: 231px;