From 0c642b288c2516d3d47bf753a56522842c7d34f0 Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Tue, 5 Dec 2023 16:31:56 +0800
Subject: [PATCH] zyh

---
 .history/src/views/KHC_20231205160148.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205160221.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205160229.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205160247.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205160435.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160448.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160604.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160654.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160730.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160825.vue  | 1829 +++++++++++++++
 .history/src/views/KHC_20231205160840.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205162356.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205162416.vue  | 1828 +++++++++++++++
 .history/src/views/KHC_20231205162815.vue  | 1830 +++++++++++++++
 .history/src/views/KHC_20231205162837.vue  | 1830 +++++++++++++++
 .history/src/views/KHC_20231205162929.vue  | 1830 +++++++++++++++
 .history/src/views/KHC_20231205163056.vue  | 1830 +++++++++++++++
 .history/src/views/TAN_20231205161911.vue  | 2452 ++++++++++++++++++++
 .history/src/views/TAN_20231205161914.vue  | 2452 ++++++++++++++++++++
 .history/src/views/XQXY_20231205155623.vue | 2063 ++++++++++++++++
 .history/src/views/XQXY_20231205155959.vue | 2063 ++++++++++++++++
 .history/src/views/ZHDY_20231205155612.vue | 2131 +++++++++++++++++
 src/views/KHC.vue                          |   58 +-
 src/views/TAN.vue                          |    5 +-
 src/views/XQXY.vue                         |   75 +-
 src/views/ZHDY.vue                         |   79 +-
 26 files changed, 42419 insertions(+), 49 deletions(-)
 create mode 100644 .history/src/views/KHC_20231205160148.vue
 create mode 100644 .history/src/views/KHC_20231205160221.vue
 create mode 100644 .history/src/views/KHC_20231205160229.vue
 create mode 100644 .history/src/views/KHC_20231205160247.vue
 create mode 100644 .history/src/views/KHC_20231205160435.vue
 create mode 100644 .history/src/views/KHC_20231205160448.vue
 create mode 100644 .history/src/views/KHC_20231205160604.vue
 create mode 100644 .history/src/views/KHC_20231205160654.vue
 create mode 100644 .history/src/views/KHC_20231205160730.vue
 create mode 100644 .history/src/views/KHC_20231205160825.vue
 create mode 100644 .history/src/views/KHC_20231205160840.vue
 create mode 100644 .history/src/views/KHC_20231205162356.vue
 create mode 100644 .history/src/views/KHC_20231205162416.vue
 create mode 100644 .history/src/views/KHC_20231205162815.vue
 create mode 100644 .history/src/views/KHC_20231205162837.vue
 create mode 100644 .history/src/views/KHC_20231205162929.vue
 create mode 100644 .history/src/views/KHC_20231205163056.vue
 create mode 100644 .history/src/views/TAN_20231205161911.vue
 create mode 100644 .history/src/views/TAN_20231205161914.vue
 create mode 100644 .history/src/views/XQXY_20231205155623.vue
 create mode 100644 .history/src/views/XQXY_20231205155959.vue
 create mode 100644 .history/src/views/ZHDY_20231205155612.vue

diff --git a/.history/src/views/KHC_20231205160148.vue b/.history/src/views/KHC_20231205160148.vue
new file mode 100644
index 0000000..bf2c5ca
--- /dev/null
+++ b/.history/src/views/KHC_20231205160148.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: ["0.09rem", "0.06rem"],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160221.vue b/.history/src/views/KHC_20231205160221.vue
new file mode 100644
index 0000000..0d6b4c3
--- /dev/null
+++ b/.history/src/views/KHC_20231205160221.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          // data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: ["0.09rem", "0.06rem"],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160229.vue b/.history/src/views/KHC_20231205160229.vue
new file mode 100644
index 0000000..bf2c5ca
--- /dev/null
+++ b/.history/src/views/KHC_20231205160229.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: ["0.09rem", "0.06rem"],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160247.vue b/.history/src/views/KHC_20231205160247.vue
new file mode 100644
index 0000000..aac3def
--- /dev/null
+++ b/.history/src/views/KHC_20231205160247.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160435.vue b/.history/src/views/KHC_20231205160435.vue
new file mode 100644
index 0000000..c407abe
--- /dev/null
+++ b/.history/src/views/KHC_20231205160435.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barWidth:2,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160448.vue b/.history/src/views/KHC_20231205160448.vue
new file mode 100644
index 0000000..9479225
--- /dev/null
+++ b/.history/src/views/KHC_20231205160448.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barWidth:22,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160604.vue b/.history/src/views/KHC_20231205160604.vue
new file mode 100644
index 0000000..35f9f3f
--- /dev/null
+++ b/.history/src/views/KHC_20231205160604.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [18, 12],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { 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, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barHeight:22,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160654.vue b/.history/src/views/KHC_20231205160654.vue
new file mode 100644
index 0000000..d76bd5a
--- /dev/null
+++ b/.history/src/views/KHC_20231205160654.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barHeight:22,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 2,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160730.vue b/.history/src/views/KHC_20231205160730.vue
new file mode 100644
index 0000000..7882251
--- /dev/null
+++ b/.history/src/views/KHC_20231205160730.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barHeight:22,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160825.vue b/.history/src/views/KHC_20231205160825.vue
new file mode 100644
index 0000000..7882251
--- /dev/null
+++ b/.history/src/views/KHC_20231205160825.vue
@@ -0,0 +1,1829 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          barHeight:22,
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205160840.vue b/.history/src/views/KHC_20231205160840.vue
new file mode 100644
index 0000000..1cec22d
--- /dev/null
+++ b/.history/src/views/KHC_20231205160840.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205162356.vue b/.history/src/views/KHC_20231205162356.vue
new file mode 100644
index 0000000..07ea614
--- /dev/null
+++ b/.history/src/views/KHC_20231205162356.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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: "scatter",
+              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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205162416.vue b/.history/src/views/KHC_20231205162416.vue
new file mode 100644
index 0000000..1cec22d
--- /dev/null
+++ b/.history/src/views/KHC_20231205162416.vue
@@ -0,0 +1,1828 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205162815.vue b/.history/src/views/KHC_20231205162815.vue
new file mode 100644
index 0000000..6225470
--- /dev/null
+++ b/.history/src/views/KHC_20231205162815.vue
@@ -0,0 +1,1830 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205162837.vue b/.history/src/views/KHC_20231205162837.vue
new file mode 100644
index 0000000..6225470
--- /dev/null
+++ b/.history/src/views/KHC_20231205162837.vue
@@ -0,0 +1,1830 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205162929.vue b/.history/src/views/KHC_20231205162929.vue
new file mode 100644
index 0000000..d67401e
--- /dev/null
+++ b/.history/src/views/KHC_20231205162929.vue
@@ -0,0 +1,1830 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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: true, // 不显示地图，用于为动效散点提供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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/KHC_20231205163056.vue b/.history/src/views/KHC_20231205163056.vue
new file mode 100644
index 0000000..6225470
--- /dev/null
+++ b/.history/src/views/KHC_20231205163056.vue
@@ -0,0 +1,1830 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
+      <div class="title_tit">
+        <p>客户侧总体用能情况分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox bottomBox1">
+              <img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">用能量</p>
+          <ul class="typeBox">
+            <li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
+              电
+            </li>
+            <li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
+              水
+            </li>
+            <li
+              :class="type1 == '蒸汽' ? 'active' : ''"
+              @click="type1 = '蒸汽'"
+            >
+              蒸汽
+            </li>
+          </ul>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+        <div class="ynflzb">
+          <p class="title">用能分类占比</p>
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
+          <div id="ynflzb"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">企业用电量排名</p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="yhzyfbqk">
+          <p class="title">用户资源分布情况</p>
+          <div id="yhzyfbqk"></div>
+        </div>
+      </div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      type1: "电",
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          data: ["昨日", "今日"],
+          icon: "roundRect",
+          itemWidth: 10, // 图标宽度
+          itemHeight: 10, // 图标高度
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+          {
+            name: "今日",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 302, 181, 234, 210, 290, 150],
+          },
+        ],
+      },
+      option1: {
+        legend: {
+          left: "right",
+          data: [{ icon: "roundRect", name: "用电量" }],
+          textStyle: {
+            fontSize: "0.07rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: "0.07rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: "0.07rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            stack: "myBar",
+
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#033BFF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#01B1FF",
+                    },
+                    // {
+                    //   offset: 1,
+                    //   color: "#01B1FF",
+                    // },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [220, 402, 231, 134, 190, 230, 120],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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:#44324B;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
+      let echartData = [
+        {
+          name: "钢筋",
+          value: "10",
+        },
+        {
+          name: "水泥",
+          value: "20",
+        },
+        {
+          name: "化工",
+          value: "30",
+        },
+        {
+          name: "制造",
+          value: "20",
+        },
+        {
+          name: "其他",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "32%",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: "0.07rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: "0.166rem",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "65%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: "0.06rem",
+              },
+              value: {
+                fontSize: "0.08rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: "0.06rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let optionData = [
+        {
+          name: "楼宇",
+          value: 60,
+          itemStyle: {
+            color: "#91DAFF",
+          },
+        },
+        {
+          name: "工业",
+          value: 44,
+          itemStyle: {
+            color: "#4466E1",
+          },
+        },
+        {
+          name: "其他",
+          value: 32,
+          itemStyle: {
+            color: "#83E7BA",
+          },
+        },
+      ];
+      let option = getPie3D(optionData, 0.59);
+      // 生成扇形的曲面参数方程
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2;
+
+        const startRadian = startRatio * Math.PI * 2;
+        const endRadian = endRatio * Math.PI * 2;
+        const midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          // eslint-disable-next-line no-param-reassign
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        // eslint-disable-next-line no-param-reassign
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            // 当前图形的高度是Z根据h（每个value的值决定的）
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = [];
+        // 总和
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        const legendData = [];
+        const k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i += 1) {
+          sumValue += pieData[i].value;
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle !== "undefined") {
+            const { itemStyle } = pieData[i];
+
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.color !== "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            // eslint-disable-next-line no-unused-expressions
+            typeof pieData[i].itemStyle.opacity !== "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i += 1) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 我这里做了一个处理，使除了第一个之外的值都是10
+            series[i].pieData.value === series[0].pieData.value ? 35 : 10
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        const option = {
+          // animation: false,
+          legend: {
+            left: "80%",
+            top: "40%",
+            data: ["楼宇", "工业", "其他"],
+            orient: "vertical",
+            icon: "roundRect",
+            itemWidth: 10, // 图标宽度
+            itemHeight: 10, // 图标高度
+            textStyle: {
+              fontSize: "0.06rem",
+              fontFamily: "AlibabaPuHuiTi",
+              fontWeight: 400,
+              color: "rgba(255,255,255,0.8)",
+            },
+            formatter: (name) => {
+              if (optionData.length) {
+                const item = optionData.filter((item) => item.name === name)[0];
+                return `  ${name} ${item.value}%`;
+              }
+            },
+          },
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== "mouseoutSeries") {
+                return `${
+                  params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value}`;
+              }
+              return "";
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 10,
+            top: "0%",
+            viewControl: {
+              // 3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20,
+              beta: 30,
+              autoRotate: false, // 禁用自动旋转
+              distance: 200, // 初始视角距离主体的距离
+              panMouseButton: "none", // 设置中键拖拽进行平移
+              rotateMouseButton: "none", // 设置右键拖拽进行旋转
+              zoomMouseButton: "none", // 禁用鼠标缩放
+            },
+            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+            postEffect: {
+              // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+              enable: false,
+              bloom: {
+                enable: true,
+                bloomIntensity: 0.1,
+              },
+              SSAO: {
+                enable: true,
+                quality: "medium",
+                radius: 2,
+              },
+              // temporalSuperSampling: {
+              //   enable: true,
+              // },
+            },
+          },
+          series,
+        };
+        return option;
+      }
+      let chartDom = document.getElementById("ynflzb");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    //用户资源分布情况
+    initfbqk() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
+      const maxValue = Math.max(...dataArr.disinfeced);
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = {
+        type: "value",
+        name: "单位:kWh",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
+      // series
+      const series = [
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { offset: 1, color: "rgba(27, 126, 242, 1)" },
+        //       ],
+        //     },
+        //   },
+        // },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [18, 12],
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: (e) => {
+                return e.value === maxValue ? e.value : "";
+              },
+              fontSize: "0.09rem",
+              color: "#fff",
+              offset: [0, 0],
+            },
+          },
+          itemStyle: {
+            borderColor: "#28F1FA",
+            borderWidth: 4,
+            color: "#28F1FA",
+          },
+        },
+        {
+          z: 1,
+          stack: "",
+          type: "bar",
+          name: "电费",
+          barWidth: 18,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
+          },
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("yhzyfbqk", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
+    this.initfbqk();
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    // height: 89.53vh;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        height: 294px;
+        // height: 27.2vh;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox1 {
+            img {
+              width: 80px;
+            }
+          }
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        // height: 29.1vh;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        // height: 30vh;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .yhhyzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ynflzb {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ynflzb {
+          width: 100%;
+          height: 100%;
+          padding-right: 40px;
+          box-sizing: border-box;
+        }
+
+        .pic {
+          width: 250px;
+          position: absolute;
+          height: 120px;
+          top: 120px;
+          left: 70px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              font-size: 14px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+              background-color: #203265;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: url();
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #yhzyfbqk {
+          width: 994px;
+          height: 324px;
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205161911.vue b/.history/src/views/TAN_20231205161911.vue
new file mode 100644
index 0000000..e41c963
--- /dev/null
+++ b/.history/src/views/TAN_20231205161911.vue
@@ -0,0 +1,2452 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205161914.vue b/.history/src/views/TAN_20231205161914.vue
new file mode 100644
index 0000000..e41c963
--- /dev/null
+++ b/.history/src/views/TAN_20231205161914.vue
@@ -0,0 +1,2452 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list">
+              <p :style="listClass(index)">{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
+      } 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;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231205155623.vue b/.history/src/views/XQXY_20231205155623.vue
new file mode 100644
index 0000000..5e6c579
--- /dev/null
+++ b/.history/src/views/XQXY_20231205155623.vue
@@ -0,0 +1,2063 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth:16,
+          itemHeight:4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top:"22%"
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+              },
+              fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth:16,
+          itemHeight:4,
+          data: [
+            {
+              icon:"rect",
+              name: "削锋",
+            },
+            {
+              icon:"rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right:100,
+          top:0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+            text: "{percents|" + "85.2%" + "}\n{val|" +"工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich:{
+              percents:{
+                fontSize: "0.0729rem",
+                align:"center",
+                fontWeight:700,
+                lineHeight:28,
+                color:"#fff",
+              },
+              val:{
+                fontSize:"0.0625rem",
+                align:"center",
+                color:"#fff",
+              }
+            }
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+            text: "{percents|" + "85.2%" + "}\n{val|" +"削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich:{
+              percents:{
+                fontSize: "0.0729rem",
+                align:"center",
+                fontWeight:700,
+                lineHeight:28,
+                color:"#fff",
+              },
+              val:{
+                fontSize:"0.0625rem",
+                align:"center",
+                color:"#fff",
+              }
+            }
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 627px;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231205155959.vue b/.history/src/views/XQXY_20231205155959.vue
new file mode 100644
index 0000000..5e6c579
--- /dev/null
+++ b/.history/src/views/XQXY_20231205155959.vue
@@ -0,0 +1,2063 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth:16,
+          itemHeight:4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top:"22%"
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+              },
+              fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth:16,
+          itemHeight:4,
+          data: [
+            {
+              icon:"rect",
+              name: "削锋",
+            },
+            {
+              icon:"rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right:100,
+          top:0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+            text: "{percents|" + "85.2%" + "}\n{val|" +"工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich:{
+              percents:{
+                fontSize: "0.0729rem",
+                align:"center",
+                fontWeight:700,
+                lineHeight:28,
+                color:"#fff",
+              },
+              val:{
+                fontSize:"0.0625rem",
+                align:"center",
+                color:"#fff",
+              }
+            }
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+            text: "{percents|" + "85.2%" + "}\n{val|" +"削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich:{
+              percents:{
+                fontSize: "0.0729rem",
+                align:"center",
+                fontWeight:700,
+                lineHeight:28,
+                color:"#fff",
+              },
+              val:{
+                fontSize:"0.0625rem",
+                align:"center",
+                color:"#fff",
+              }
+            }
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 627px;
+      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) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231205155612.vue b/.history/src/views/ZHDY_20231205155612.vue
new file mode 100644
index 0000000..713c02b
--- /dev/null
+++ b/.history/src/views/ZHDY_20231205155612.vue
@@ -0,0 +1,2131 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>智慧售电云平台</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">年度签约用户</p>
+          <div class="bg_title">
+            <p class="tit_first">2451<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <p class="first">山东省</p>
+        <p class="second">8000<sapn class="danwei1">户</sapn></p>
+        <p class="thrid">7895<span class="danwei2">（kwh)</span></p>
+      </div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">年度签约量分布</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">公告政策信息</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "12%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                // fontSize: 12,
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：MWh",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [
+              760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300,
+              400,
+            ],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#00D6F9",
+                  // fontSize: 12,
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    qyyh() {
+      let option = {
+        // backgroundColor: '#081736',
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(255, 255, 255,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                ],
+                global: false,
+              },
+            },
+          },
+        },
+
+        grid: {
+          top: "12%",
+          left: "10%",
+          right: "10%",
+          bottom: "25%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+
+            axisLabel: {
+              color: "#fff",
+              width: 100,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            boundaryGap: false,
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+            ], //this.$moment(data.times).format("HH-mm") ,
+          },
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            // max: 140,
+            splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              margin: 20,
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#2CABE3",
+              },
+            },
+            itemStyle: {
+              color: "#2CABE3",
+              borderColor: "#2CABE3",
+              borderWidth: 2,
+            },
+            data: [
+              4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5,
+              4, 3, 5, 8,
+            ], //data.values
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#7def86",
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#7def86",
+                borderColor: "rgba(0, 255, 240, 1)",
+                lineStyle: {
+                  color: "rgba(0, 255, 240, 1)",
+                },
+              },
+            },
+            data: [
+              3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4,
+              2, 1, 7, 6,
+            ], //data.values
+          },
+        ],
+      };
+      this.defineEcharts("qyyh", option);
+    },
+    // 年度售电量
+    ndsdl() {
+      var colors = ["#00FFFF", "#02FF67", "#675bba"];
+
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top: "25%",
+          right: "5%",
+          left: "15%",
+          bottom: "20%",
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "#fff",
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#0a3e98",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#195384",
+                type: "dotted",
+              },
+            },
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+            ],
+          },
+        ],
+        dataZoom: [
+          {
+            show: false,
+            realtime: false,
+            start: 0,
+            end: 100,
+          },
+          {
+            type: "inside",
+            realtime: true,
+            start: 0,
+            end: 100,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位：户",
+            min: 0,
+            position: "left",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: 12,
+              fontSize: "0.0625rem",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#0a3e98",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#0a3e98",
+                type: "dotted",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "发放人数",
+            type: "line",
+            // smooth: true, //是否平滑
+            // showAllSymbol: true,
+            // symbol: 'image://./static/images/guang-circle.png',
+            symbol: "circle",
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#14ADFD",
+              },
+            },
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#14ADFD",
+              },
+            },
+            itemStyle: {
+              color: "#fff",
+              borderColor: "#14ADFD",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(78, 173, 244, 0.90)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(37, 98, 179, 0.90)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(37, 98, 179, 0.90)",
+                shadowBlur: 20,
+              },
+            },
+            data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480, 300],
+          },
+        ],
+      };
+      this.defineEcharts("ndsdl", option);
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        // axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: "0.0625rem", color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          // axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: "0.0625rem", color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          color:"#fff",
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: "0.0625rem", color: "#fff" },
+            // textStyle: { fontSize: 12, color: "#fff" },
+          },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["32%", "50%"],
+          radius: [75, 79],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "45%",
+          textAlign: "center",
+          left: "30%",
+          textStyle: {
+            color: "#fff",
+            // fontSize: 32,
+            fontSize: "0.125rem",
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            // fontSize: 16,
+            fontSize: "0.0833rem",
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return (
+                `{name|${name}}` +
+                "\t" +
+                "\t" +
+                "\t" +
+                "\t" +
+                `{num|${percent}}` +
+                "\t" +
+                "\t" +
+                `{name|%}`
+              );
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 258,
+          top:96,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                // fontSize: 16,
+                fontSize: "0.0833rem",
+                color: "#fff",
+              },
+              num: {
+                // fontSize: 12,
+                fontWeight: 700,
+                fontSize: "0.0833rem",
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      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",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option);
+    // this.defineEcharts("ynl", this.option1);
+    this.qyyh();
+    this.pcfx();
+    this.yhhyzb();
+    this.ndsdl();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/zhsdy/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        letter-spacing: 36px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 10px !important;
+        color: #fff;
+        margin-left: 490px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 400px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 136px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+            margin-top: 5px;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 60px;
+              margin-left: 2px;
+            }
+          }
+
+          .tit_second {
+            width: 162px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 400px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 136px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 60px;
+              margin-left: 2px;
+            }
+          }
+
+          .tit_second {
+            width: 162px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 10px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  width: 28px;
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  width: 57px;
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                width: 33px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 0.927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.png");
+      background-size: cover;
+      z-index: 1;
+      top: 400px;
+      right: 480px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 16px;
+      text-align: center;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        padding-left: 30px;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 118px;
+        height: 36px;
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        .danwei1 {
+          margin-left: 3px;
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        padding-left: 20px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          margin-left: 3px;
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/KHC.vue b/src/views/KHC.vue
index cb12c4b..6225470 100644
--- a/src/views/KHC.vue
+++ b/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,
-          name: "底部",
-          type: "pictorialBar",
-          data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
-          symbol: "diamond",
-          symbolOffset: [0, "50%"],
-          symbolSize: [18, 12],
-          itemStyle: {
-            color: {
-              type: "linear",
-              x: 0,
-              x2: 1,
-              y: 0,
-              y2: 0,
-              colorStops: [
-                { 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, .7)" },
-                { offset: 1, color: "rgba(27, 126, 242, 1)" },
-              ],
-            },
-          },
-        },
+        // {
+        //   z: 2,
+        //   name: "底部",
+        //   type: "pictorialBar",
+        //   data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
+        //   symbol: "diamond",
+        //   symbolOffset: [0, "50%"],
+        //   symbolSize: [18, 12],
+        //   itemStyle: {
+        //     color: {
+        //       type: "linear",
+        //       x: 0,
+        //       x2: 1,
+        //       y: 0,
+        //       y2: 0,
+        //       colorStops: [
+        //         { 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, .7)" },
+        //         { 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,
diff --git a/src/views/TAN.vue b/src/views/TAN.vue
index 57301ba..e41c963 100644
--- a/src/views/TAN.vue
+++ b/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,
diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue
index 9d3d395..5e6c579 100644
--- a/src/views/XQXY.vue
+++ b/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);
         //点击地图区域事件
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
index 3fa249a..713c02b 100644
--- a/src/views/ZHDY.vue
+++ b/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.0625rem", // 选中地图文字字号和字体颜色
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
                   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.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: 14,
-                    fontSize: "0.0729rem",
+                    fontSize: "0.07rem",
                     fontWeight: 600,
                   },
                   tline: {
                     padding: [0, 27],
                     color: "#fff",
-                    // fontSize: 12,
-                    fontSize: "0.0625rem",
+                    fontSize: "0.06rem",
                   },
                 },
               },
@@ -1282,6 +1337,8 @@ export default {
           animation: true,
         };
 
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
         myChart.setOption(option);
         myChart.on("click", chartClick);
         //点击地图区域事件