diff --git a/.history/src/views/KHC_20231204090136.vue b/.history/src/views/KHC_20231204090136.vue
new file mode 100644
index 0000000..0492cc7
--- /dev/null
+++ b/.history/src/views/KHC_20231204090136.vue
@@ -0,0 +1,1748 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>客户侧总体用能情况分析</p>
+      <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">
+              <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="type == '电' ? 'active' : ''" @click="type = '电'">
+              电
+            </li>
+            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+              水
+            </li>
+            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+              蒸汽
+            </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" :style="listClass(index)">
+              <p>{{ 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";
+import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      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: fontSizeRem(14),
+            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: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                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: fontSizeRem(14),
+            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: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:MWH",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                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;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "center",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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 getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let 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: function (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: function (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: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let 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: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            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++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          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,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              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 + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    //用户资源分布情况
+    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",
+        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+        axisLine: { show: false, lineStyle: { color: "#fff" } },
+        axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+      }
+      // series
+      const series = [
+        {
+          z: 2,
+          name: '底部',
+          type: 'pictorialBar',
+          data: [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: 18,
+              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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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;
+
+          .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%;
+        }
+
+        .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: 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;
+              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%);
+
+      .yhzyfbqk {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        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: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    #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_20231204083657.vue b/.history/src/views/TAN_20231204083657.vue
new file mode 100644
index 0000000..b98f81d
--- /dev/null
+++ b/.history/src/views/TAN_20231204083657.vue
@@ -0,0 +1,2225 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("qyhyfb", option);
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (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: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204083936.vue b/.history/src/views/TAN_20231204083936.vue
new file mode 100644
index 0000000..7ef65b5
--- /dev/null
+++ b/.history/src/views/TAN_20231204083936.vue
@@ -0,0 +1,2483 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (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: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204084111.vue b/.history/src/views/TAN_20231204084111.vue
new file mode 100644
index 0000000..dc2f815
--- /dev/null
+++ b/.history/src/views/TAN_20231204084111.vue
@@ -0,0 +1,2227 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204090629.vue b/.history/src/views/TAN_20231204090629.vue
new file mode 100644
index 0000000..bcb6c2b
--- /dev/null
+++ b/.history/src/views/TAN_20231204090629.vue
@@ -0,0 +1,2245 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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">
+              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 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204090638.vue b/.history/src/views/TAN_20231204090638.vue
new file mode 100644
index 0000000..ee36f57
--- /dev/null
+++ b/.history/src/views/TAN_20231204090638.vue
@@ -0,0 +1,2245 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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">
+              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 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204090639.vue b/.history/src/views/TAN_20231204090639.vue
new file mode 100644
index 0000000..ee36f57
--- /dev/null
+++ b/.history/src/views/TAN_20231204090639.vue
@@ -0,0 +1,2245 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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">
+              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 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204090703.vue b/.history/src/views/TAN_20231204090703.vue
new file mode 100644
index 0000000..0912e24
--- /dev/null
+++ b/.history/src/views/TAN_20231204090703.vue
@@ -0,0 +1,2313 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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">
+              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 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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_20231204090705.vue b/.history/src/views/TAN_20231204090705.vue
new file mode 100644
index 0000000..0912e24
--- /dev/null
+++ b/.history/src/views/TAN_20231204090705.vue
@@ -0,0 +1,2313 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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">
+              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 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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_20231204090746.vue b/.history/src/views/TAN_20231204090746.vue
new file mode 100644
index 0000000..5452318
--- /dev/null
+++ b/.history/src/views/TAN_20231204090746.vue
@@ -0,0 +1,2313 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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_20231204090800.vue b/.history/src/views/TAN_20231204090800.vue
new file mode 100644
index 0000000..0cd22bc
--- /dev/null
+++ b/.history/src/views/TAN_20231204090800.vue
@@ -0,0 +1,2313 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <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_con"
+                >
+                  <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_con"
+                >
+                  <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" :style="listClass(index)">
+              <p>{{ 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;
+  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%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: fontSizeRem(10),
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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",
+          data: [
+            { icon: "circle", name: "2022" },
+            { icon: "circle", name: "2023" },
+          ],
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          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: {
+                fontSize: fontSizeRem(12),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(14),
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: fontSizeRem(14),
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: fontSizeRem(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,
+              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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      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),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              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: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: 110,
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: fontSizeRem(14),
+                  fontWeight: "normal",
+                  color: "#fff",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: fontSizeRem(32),
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: fontSizeRem(12),
+              },
+              value: {
+                fontSize: fontSizeRem(16),
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                fontSize: fontSizeRem(12),
+              },
+            },
+          },
+          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("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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+    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,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            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() {
+    console.log(fontSizeRem(22));
+    console.log(fontSizeRem(100));
+    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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 50px;
+          top: 36px;
+          // 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: 50px;
+          }
+
+          p:nth-child(2) {
+            width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+          }
+
+          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: 50px;
+              height: 60px;
+              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: 200px;
+          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: 200px;
+          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: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 52px;
+            margin-left: 20px;
+            margin-top: 60px;
+            box-shadow: inset 16px 10px 39px 12px #6bfffe;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #061a4d;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 36px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 36px;
+              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_con: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_20231204084419.vue b/.history/src/views/XQXY_20231204084419.vue
new file mode 100644
index 0000000..72e704a
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084419.vue
@@ -0,0 +1,2402 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (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: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204084449.vue b/.history/src/views/XQXY_20231204084449.vue
new file mode 100644
index 0000000..760f0a0
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084449.vue
@@ -0,0 +1,2146 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204084552.vue b/.history/src/views/XQXY_20231204084552.vue
new file mode 100644
index 0000000..760f0a0
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084552.vue
@@ -0,0 +1,2146 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204084648.vue b/.history/src/views/XQXY_20231204084648.vue
new file mode 100644
index 0000000..760f0a0
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084648.vue
@@ -0,0 +1,2146 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204084739.vue b/.history/src/views/XQXY_20231204084739.vue
new file mode 100644
index 0000000..d71198d
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084739.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+    }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204084854.vue b/.history/src/views/XQXY_20231204084854.vue
new file mode 100644
index 0000000..c655081
--- /dev/null
+++ b/.history/src/views/XQXY_20231204084854.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204085213.vue b/.history/src/views/XQXY_20231204085213.vue
new file mode 100644
index 0000000..c655081
--- /dev/null
+++ b/.history/src/views/XQXY_20231204085213.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 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;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231204085440.vue b/.history/src/views/XQXY_20231204085440.vue
new file mode 100644
index 0000000..4ee936d
--- /dev/null
+++ b/.history/src/views/XQXY_20231204085440.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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: 276px;
+          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_20231204085606.vue b/.history/src/views/XQXY_20231204085606.vue
new file mode 100644
index 0000000..1161c8a
--- /dev/null
+++ b/.history/src/views/XQXY_20231204085606.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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_20231204085744.vue b/.history/src/views/XQXY_20231204085744.vue
new file mode 100644
index 0000000..6b4b3f1
--- /dev/null
+++ b/.history/src/views/XQXY_20231204085744.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: false,
+              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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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_20231204085752.vue b/.history/src/views/XQXY_20231204085752.vue
new file mode 100644
index 0000000..1161c8a
--- /dev/null
+++ b/.history/src/views/XQXY_20231204085752.vue
@@ -0,0 +1,2145 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <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">2356<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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: 12,
+              },
+            },
+            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: 12,
+                },
+              },
+            },
+          },
+          {
+            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: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              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();
+      });
+    },
+    //偏差分析
+    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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "工业",
+          text: "85.2%",
+          left: "48",
+          align: "center",
+          top: "40%",
+          // padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          subtext: "削锋",
+          text: "85.2%",
+          left: "48",
+          top: "40%",
+          align: "center",
+          padding: [10, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 12,
+            align: "center",
+          },
+        },
+        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: 40,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: 12,
+                // color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                // 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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .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: 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%;
+
+              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: 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: 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: 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%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            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;
+            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_20231204084203.vue b/.history/src/views/ZHDY_20231204084203.vue
new file mode 100644
index 0000000..d2df950
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204084203.vue
@@ -0,0 +1,1714 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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="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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204084224.vue b/.history/src/views/ZHDY_20231204084224.vue
new file mode 100644
index 0000000..38383f9
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204084224.vue
@@ -0,0 +1,1972 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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="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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204084337.vue b/.history/src/views/ZHDY_20231204084337.vue
new file mode 100644
index 0000000..046300e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204084337.vue
@@ -0,0 +1,1972 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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="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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204090510.vue b/.history/src/views/ZHDY_20231204090510.vue
new file mode 100644
index 0000000..c929f7f
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204090510.vue
@@ -0,0 +1,1990 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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">
+        <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 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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204090533.vue b/.history/src/views/ZHDY_20231204090533.vue
new file mode 100644
index 0000000..e2cb0ec
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204090533.vue
@@ -0,0 +1,1990 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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">
+        <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 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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204090556.vue b/.history/src/views/ZHDY_20231204090556.vue
new file mode 100644
index 0000000..046300e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204090556.vue
@@ -0,0 +1,1972 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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="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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091011.vue b/.history/src/views/ZHDY_20231204091011.vue
new file mode 100644
index 0000000..edbd52b
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091011.vue
@@ -0,0 +1,1989 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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>
+        <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="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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091032.vue b/.history/src/views/ZHDY_20231204091032.vue
new file mode 100644
index 0000000..0bfe86e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091032.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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"></p>
+        <p class="thrid"></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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091113.vue b/.history/src/views/ZHDY_20231204091113.vue
new file mode 100644
index 0000000..717b2a3
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091113.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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"></p>
+        <p class="thrid"></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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091130.vue b/.history/src/views/ZHDY_20231204091130.vue
new file mode 100644
index 0000000..b3063d9
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091130.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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="danwei">户</sapn></p>
+        <p class="thrid"></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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091224.vue b/.history/src/views/ZHDY_20231204091224.vue
new file mode 100644
index 0000000..1141da9
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091224.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091405.vue b/.history/src/views/ZHDY_20231204091405.vue
new file mode 100644
index 0000000..308b53d
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091405.vue
@@ -0,0 +1,2044 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 178px;
+      height: 193px;
+      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%;
+
+        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/ZHDY_20231204091419.vue b/.history/src/views/ZHDY_20231204091419.vue
new file mode 100644
index 0000000..bee891e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091419.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      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%;
+
+        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/ZHDY_20231204091437.vue b/.history/src/views/ZHDY_20231204091437.vue
new file mode 100644
index 0000000..bee891e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091437.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      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%;
+
+        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/ZHDY_20231204091530.vue b/.history/src/views/ZHDY_20231204091530.vue
new file mode 100644
index 0000000..595314d
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091530.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.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%;
+
+        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/ZHDY_20231204091548.vue b/.history/src/views/ZHDY_20231204091548.vue
new file mode 100644
index 0000000..ecb4b4e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091548.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 572px;
+      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%;
+
+        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/ZHDY_20231204091556.vue b/.history/src/views/ZHDY_20231204091556.vue
new file mode 100644
index 0000000..040e419
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091556.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 502px;
+      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%;
+
+        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/ZHDY_20231204091557.vue b/.history/src/views/ZHDY_20231204091557.vue
new file mode 100644
index 0000000..040e419
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091557.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 502px;
+      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%;
+
+        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/ZHDY_20231204091610.vue b/.history/src/views/ZHDY_20231204091610.vue
new file mode 100644
index 0000000..626f920
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091610.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .927083rem /* 178/192 */;
+      // width: 178px;
+      height: 193px;
+      background: url("../assets/zhsdy/10.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 480px;
+      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%;
+
+        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/ZHDY_20231204091631.vue b/.history/src/views/ZHDY_20231204091631.vue
new file mode 100644
index 0000000..83600c6
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091631.vue
@@ -0,0 +1,2045 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: .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: 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%;
+
+        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/ZHDY_20231204091752.vue b/.history/src/views/ZHDY_20231204091752.vue
new file mode 100644
index 0000000..5501ea6
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091752.vue
@@ -0,0 +1,2007 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second{
+        width: 98px;
+height: 36px;
+font-size: 30px;
+font-weight: 700;
+color: #F1DB50;
+line-height: 36px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091758.vue b/.history/src/views/ZHDY_20231204091758.vue
new file mode 100644
index 0000000..488ceb8
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091758.vue
@@ -0,0 +1,2007 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091827.vue b/.history/src/views/ZHDY_20231204091827.vue
new file mode 100644
index 0000000..dc6385e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091827.vue
@@ -0,0 +1,2015 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+      p.thrid{
+        width: 137px;
+height: 36px;
+font-size: 30px;
+font-weight: 700;
+color: #59F1FC;
+line-height: 36px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091843.vue b/.history/src/views/ZHDY_20231204091843.vue
new file mode 100644
index 0000000..0ec441b
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091843.vue
@@ -0,0 +1,2015 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091904.vue b/.history/src/views/ZHDY_20231204091904.vue
new file mode 100644
index 0000000..a336e46
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091904.vue
@@ -0,0 +1,2018 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2{
+          
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091921.vue b/.history/src/views/ZHDY_20231204091921.vue
new file mode 100644
index 0000000..acfe0bb
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091921.vue
@@ -0,0 +1,2019 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2{
+          color: #fff;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091930.vue b/.history/src/views/ZHDY_20231204091930.vue
new file mode 100644
index 0000000..ab58b3e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091930.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2{
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204091942.vue b/.history/src/views/ZHDY_20231204091942.vue
new file mode 100644
index 0000000..a6668bb
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204091942.vue
@@ -0,0 +1,2025 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1{
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2{
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092029.vue b/.history/src/views/ZHDY_20231204092029.vue
new file mode 100644
index 0000000..d746a58
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092029.vue
@@ -0,0 +1,2025 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092130.vue b/.history/src/views/ZHDY_20231204092130.vue
new file mode 100644
index 0000000..fe043aa
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092130.vue
@@ -0,0 +1,2026 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      text-align: center;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092308.vue b/.history/src/views/ZHDY_20231204092308.vue
new file mode 100644
index 0000000..57dea69
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092308.vue
@@ -0,0 +1,2026 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      text-align: center;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        // line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092356.vue b/.history/src/views/ZHDY_20231204092356.vue
new file mode 100644
index 0000000..fe043aa
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092356.vue
@@ -0,0 +1,2026 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      text-align: center;
+      p.first {
+        width: 60px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 36px;
+      }
+      p.second {
+        width: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092417.vue b/.history/src/views/ZHDY_20231204092417.vue
new file mode 100644
index 0000000..38505dd
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092417.vue
@@ -0,0 +1,2027 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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: 98px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092430.vue b/.history/src/views/ZHDY_20231204092430.vue
new file mode 100644
index 0000000..443c4b0
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092430.vue
@@ -0,0 +1,2028 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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: 98px;
+        height: 36px;
+        padding-left: 5px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092435.vue b/.history/src/views/ZHDY_20231204092435.vue
new file mode 100644
index 0000000..0764318
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092435.vue
@@ -0,0 +1,2028 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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: 98px;
+        height: 36px;
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #f1db50;
+        line-height: 36px;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092442.vue b/.history/src/views/ZHDY_20231204092442.vue
new file mode 100644
index 0000000..98cbe0f
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092442.vue
@@ -0,0 +1,2028 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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;
+        span.danwei1 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092459.vue b/.history/src/views/ZHDY_20231204092459.vue
new file mode 100644
index 0000000..ce14b37
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092459.vue
@@ -0,0 +1,2028 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      p.thrid {
+        width: 137px;
+        height: 36px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092518.vue b/.history/src/views/ZHDY_20231204092518.vue
new file mode 100644
index 0000000..340bc40
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092518.vue
@@ -0,0 +1,2029 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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;
+        font-size: 30px;
+        font-weight: 700;
+        color: #59f1fc;
+        line-height: 36px;
+        span.danwei2 {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231204092523.vue b/.history/src/views/ZHDY_20231204092523.vue
new file mode 100644
index 0000000..024e491
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092523.vue
@@ -0,0 +1,2030 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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;
+        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/.history/src/views/ZHDY_20231204092537.vue b/.history/src/views/ZHDY_20231204092537.vue
new file mode 100644
index 0000000..ac6309a
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092537.vue
@@ -0,0 +1,2031 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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: 15px;
+        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/.history/src/views/ZHDY_20231204092551.vue b/.history/src/views/ZHDY_20231204092551.vue
new file mode 100644
index 0000000..c94c738
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092551.vue
@@ -0,0 +1,2031 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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: 30px;
+        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/.history/src/views/ZHDY_20231204092559.vue b/.history/src/views/ZHDY_20231204092559.vue
new file mode 100644
index 0000000..01c20fc
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092559.vue
@@ -0,0 +1,2031 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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: 36px;
+      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/.history/src/views/ZHDY_20231204092630.vue b/.history/src/views/ZHDY_20231204092630.vue
new file mode 100644
index 0000000..4f607c5
--- /dev/null
+++ b/.history/src/views/ZHDY_20231204092630.vue
@@ -0,0 +1,2031 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <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,
+              },
+            },
+            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,
+                },
+              },
+            },
+          },
+        ],
+      },
+      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,
+            },
+            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" } },
+        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" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, 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: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            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" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
+  },
+  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;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #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: 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: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            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: 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: 396px;
+            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%;
+
+              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/TAN.vue b/src/views/TAN.vue
index f514422..0cd22bc 100644
--- a/src/views/TAN.vue
+++ b/src/views/TAN.vue
@@ -47,17 +47,6 @@
         </div>
         <div class="ynl">
           <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="ynl"></div>
         </div>
       </div>
@@ -130,6 +119,24 @@
         </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>
@@ -1244,6 +1251,264 @@ export default {
       };
       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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
     nyxhqk() {
       var attaData1 = [62, 52, 34, 61, 75, 140];
       var attaData2 = [162, 152, 134, 161, 115, 150];
@@ -1260,7 +1525,7 @@ export default {
         },
         legend: {
           left: "center",
-          top:40,
+          top: 40,
           data: [
             {
               name: "2020",
@@ -1375,263 +1640,7 @@ export default {
     this.defineEcharts("sh", this.circles5);
     this.defineEcharts("hg", this.circles6);
     this.nyxhqk();
-    var data = [
-      {
-        name: "南京市",
-        value: 1,
-      },
-      {
-        name: "济南市",
-        value: 2,
-      },
-      {
-        name: "徐州市",
-        value: 3,
-      },
-      {
-        name: "常州市",
-        value: 4,
-      },
-      {
-        name: "苏州市",
-        value: 5,
-      },
-      {
-        name: "南通市",
-        value: 6,
-      },
-      {
-        name: "连云港市",
-        value: 7,
-      },
-      {
-        name: "淮安市",
-        value: 8,
-      },
-      {
-        name: "盐城市",
-        value: 9,
-      },
-      {
-        name: "扬州市",
-        value: 10,
-      },
-      {
-        name: "镇江市",
-        value: 11,
-      },
-      {
-        name: "泰州市",
-        value: 12,
-      },
-      {
-        name: "宿迁市",
-        value: 13,
-      },
-    ];
-    var splitList = [
-      {
-        start: 1,
-        end: 1,
-        label: "济南市",
-        color: "#236da8",
-      },
-      {
-        start: 2,
-        end: 2,
-        label: "无锡市",
-        color: "#2884db",
-      },
-      {
-        start: 3,
-        end: 3,
-        label: "徐州市",
-        color: "#244779",
-      },
-      {
-        start: 4,
-        end: 4,
-        label: "常州市",
-        color: "#246198",
-      },
-      {
-        start: 5,
-        end: 5,
-        label: "苏州市",
-        color: "#2884db",
-      },
-      {
-        start: 6,
-        end: 6,
-        label: "南通市",
-        color: "#2884db",
-      },
-      {
-        start: 7,
-        end: 7,
-        label: "连云港市",
-        color: "#244779",
-      },
-      {
-        start: 8,
-        end: 8,
-        label: "淮安市",
-        color: "#244779",
-      },
-      {
-        start: 9,
-        end: 9,
-        label: "盐城市",
-        color: "#244779",
-      },
-      {
-        start: 10,
-        end: 10,
-        label: "扬州市",
-        color: "#246198",
-      },
-      {
-        start: 11,
-        end: 11,
-        label: "镇江市",
-        color: "#2884db",
-      },
-      {
-        start: 12,
-        end: 12,
-        label: "泰州市",
-        color: "#2884db",
-      },
-      {
-        start: 13,
-        end: 13,
-        label: "宿迁市",
-        color: "#244779",
-      },
-    ];
-    var chartDom = document.getElementById("map");
-    var myChart = this.$echarts.init(chartDom, null, {
-      devicePixelRatio: 10, // 设置为2或更高的值
-    });
-
-    //获取山东地图数据。
-    $.get(
-      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
-      function (geojson) {
-        echarts.registerMap("山东", geojson);
-        let option = {
-          series: [
-            {
-              tooltip: {
-                trigger: "item",
-              },
-              name: "山东",
-              type: "map3D",
-              map: "山东",
-              boxDepth: 60, //地图倾斜度
-              regionHeight: 6, //地图厚度
-              label: {
-                show: true, //是否显示市
-                textStyle: {
-                  color: "#fff", //文字颜色
-                  fontSize: 12, //文字大小
-                  fontFamily: "微软雅黑",
-                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
-                },
-              },
-              itemStyle: {
-                opacity: 1, // 透明度
-                borderWidth: 1.5, //分界线宽度
-                borderColor: "#0699E4", //分界线颜色
-              },
-              groundplane: {
-                show: true,
-              },
-              data: data,
-              //shading: 'realistic',
-              // 真实感材质相关配置 shading: 'realistic'时有效
-              realisticMaterial: {
-                detailTexture: "#093099", // 纹理贴图
-                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                metalness: 1, // 0材质是非金属 ，1金属
-                roughnessAdjust: 0,
-              },
-              viewControl: {
-                distance: 80, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            },
-          ],
-          dataRange: {
-            show: false,
-            splitList: splitList,
-          },
-          animation: true,
-        };
-        myChart.setOption(option);
-        myChart.on("click", this.chartClick);
-        let chartClick = function (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: 100, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            };
-            myChart.setOption(option);
-          });
-        };
-      }
-    );
+    this.initMap();
   },
   beforeDestroy() {
     //离开页面后，删除屏幕监听，防止监听事件一直存在
@@ -2231,6 +2240,74 @@ export default {
       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/src/views/XQXY.vue b/src/views/XQXY.vue
index 2777090..1161c8a 100644
--- a/src/views/XQXY.vue
+++ b/src/views/XQXY.vue
@@ -1010,7 +1010,7 @@ export default {
           subtext: "工业",
           text: "85.2%",
           left: "48",
-          align:"center",
+          align: "center",
           top: "40%",
           // padding: [10, 0],
           textStyle: {
@@ -1127,7 +1127,7 @@ export default {
           text: "85.2%",
           left: "48",
           top: "40%",
-          align:"center",
+          align: "center",
           padding: [10, 0],
           textStyle: {
             color: "#fff",
@@ -1207,6 +1207,265 @@ export default {
       };
       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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
   },
   mounted() {
     this.defineEcharts("ndqylfb", this.option1);
@@ -1215,263 +1474,7 @@ export default {
     this.defineEcharts("pcfxb", this.option4);
     this.gongye();
     this.xuefeng();
-    var data = [
-      {
-        name: "南京市",
-        value: 1,
-      },
-      {
-        name: "济南市",
-        value: 2,
-      },
-      {
-        name: "徐州市",
-        value: 3,
-      },
-      {
-        name: "常州市",
-        value: 4,
-      },
-      {
-        name: "苏州市",
-        value: 5,
-      },
-      {
-        name: "南通市",
-        value: 6,
-      },
-      {
-        name: "连云港市",
-        value: 7,
-      },
-      {
-        name: "淮安市",
-        value: 8,
-      },
-      {
-        name: "盐城市",
-        value: 9,
-      },
-      {
-        name: "扬州市",
-        value: 10,
-      },
-      {
-        name: "镇江市",
-        value: 11,
-      },
-      {
-        name: "泰州市",
-        value: 12,
-      },
-      {
-        name: "宿迁市",
-        value: 13,
-      },
-    ];
-    var splitList = [
-      {
-        start: 1,
-        end: 1,
-        label: "济南市",
-        color: "#236da8",
-      },
-      {
-        start: 2,
-        end: 2,
-        label: "无锡市",
-        color: "#2884db",
-      },
-      {
-        start: 3,
-        end: 3,
-        label: "徐州市",
-        color: "#244779",
-      },
-      {
-        start: 4,
-        end: 4,
-        label: "常州市",
-        color: "#246198",
-      },
-      {
-        start: 5,
-        end: 5,
-        label: "苏州市",
-        color: "#2884db",
-      },
-      {
-        start: 6,
-        end: 6,
-        label: "南通市",
-        color: "#2884db",
-      },
-      {
-        start: 7,
-        end: 7,
-        label: "连云港市",
-        color: "#244779",
-      },
-      {
-        start: 8,
-        end: 8,
-        label: "淮安市",
-        color: "#244779",
-      },
-      {
-        start: 9,
-        end: 9,
-        label: "盐城市",
-        color: "#244779",
-      },
-      {
-        start: 10,
-        end: 10,
-        label: "扬州市",
-        color: "#246198",
-      },
-      {
-        start: 11,
-        end: 11,
-        label: "镇江市",
-        color: "#2884db",
-      },
-      {
-        start: 12,
-        end: 12,
-        label: "泰州市",
-        color: "#2884db",
-      },
-      {
-        start: 13,
-        end: 13,
-        label: "宿迁市",
-        color: "#244779",
-      },
-    ];
-    var chartDom = document.getElementById("map");
-    var myChart = this.$echarts.init(chartDom, null, {
-      devicePixelRatio: 10, // 设置为2或更高的值
-    });
-
-    //获取山东地图数据。
-    $.get(
-      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
-      function (geojson) {
-        echarts.registerMap("山东", geojson);
-        let option = {
-          series: [
-            {
-              tooltip: {
-                trigger: "item",
-              },
-              name: "山东",
-              type: "map3D",
-              map: "山东",
-              boxDepth: 60, //地图倾斜度
-              regionHeight: 6, //地图厚度
-              label: {
-                show: true, //是否显示市
-                textStyle: {
-                  color: "#fff", //文字颜色
-                  fontSize: 12, //文字大小
-                  fontFamily: "微软雅黑",
-                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
-                },
-              },
-              itemStyle: {
-                opacity: 1, // 透明度
-                borderWidth: 1.5, //分界线宽度
-                borderColor: "#0699E4", //分界线颜色
-              },
-              groundplane: {
-                show: true,
-              },
-              data: data,
-              //shading: 'realistic',
-              // 真实感材质相关配置 shading: 'realistic'时有效
-              realisticMaterial: {
-                detailTexture: "#093099", // 纹理贴图
-                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                metalness: 1, // 0材质是非金属 ，1金属
-                roughnessAdjust: 0,
-              },
-              viewControl: {
-                distance: 80, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            },
-          ],
-          dataRange: {
-            show: false,
-            splitList: splitList,
-          },
-          animation: true,
-        };
-        myChart.setOption(option);
-        myChart.on("click", this.chartClick);
-        let chartClick = function (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: 100, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            };
-            myChart.setOption(option);
-          });
-        };
-      }
-    );
+    this.initMap();
   },
   beforeDestroy() {
     //离开页面后，删除屏幕监听，防止监听事件一直存在
@@ -2069,7 +2072,7 @@ export default {
         .title {
           position: absolute;
           left: 50%;
-          width: 144px;
+          width: 1.2rem;
           height: 36px;
           font-size: 18px;
           font-family: "Source Han Sans";
@@ -2129,15 +2132,14 @@ export default {
         }
       }
     }
-
-    #map {
-      width: 994px;
-      position: absolute;
-      height: 627px;
-      left: 50%;
-      transform: translateX(-50%);
-      overflow: hidden;
-    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
   }
 }
 </style>
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
index 7322daa..4f607c5 100644
--- a/src/views/ZHDY.vue
+++ b/src/views/ZHDY.vue
@@ -120,6 +120,11 @@
         </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>
@@ -669,7 +674,7 @@ export default {
                 shadowBlur: 20,
               },
             },
-            data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480,300],
+            data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480, 300],
           },
         ],
       };
@@ -1055,6 +1060,264 @@ export default {
       };
       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();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                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,
+          };
+
+          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);
+            // });
+          }
+        }
+      );
+    },
   },
   mounted() {
     this.defineEcharts("ndqylfb", this.option);
@@ -1063,263 +1326,7 @@ export default {
     this.pcfx();
     this.yhhyzb();
     this.ndsdl();
-    var data = [
-      {
-        name: "南京市",
-        value: 1,
-      },
-      {
-        name: "济南市",
-        value: 2,
-      },
-      {
-        name: "徐州市",
-        value: 3,
-      },
-      {
-        name: "常州市",
-        value: 4,
-      },
-      {
-        name: "苏州市",
-        value: 5,
-      },
-      {
-        name: "南通市",
-        value: 6,
-      },
-      {
-        name: "连云港市",
-        value: 7,
-      },
-      {
-        name: "淮安市",
-        value: 8,
-      },
-      {
-        name: "盐城市",
-        value: 9,
-      },
-      {
-        name: "扬州市",
-        value: 10,
-      },
-      {
-        name: "镇江市",
-        value: 11,
-      },
-      {
-        name: "泰州市",
-        value: 12,
-      },
-      {
-        name: "宿迁市",
-        value: 13,
-      },
-    ];
-    var splitList = [
-      {
-        start: 1,
-        end: 1,
-        label: "济南市",
-        color: "#236da8",
-      },
-      {
-        start: 2,
-        end: 2,
-        label: "无锡市",
-        color: "#2884db",
-      },
-      {
-        start: 3,
-        end: 3,
-        label: "徐州市",
-        color: "#244779",
-      },
-      {
-        start: 4,
-        end: 4,
-        label: "常州市",
-        color: "#246198",
-      },
-      {
-        start: 5,
-        end: 5,
-        label: "苏州市",
-        color: "#2884db",
-      },
-      {
-        start: 6,
-        end: 6,
-        label: "南通市",
-        color: "#2884db",
-      },
-      {
-        start: 7,
-        end: 7,
-        label: "连云港市",
-        color: "#244779",
-      },
-      {
-        start: 8,
-        end: 8,
-        label: "淮安市",
-        color: "#244779",
-      },
-      {
-        start: 9,
-        end: 9,
-        label: "盐城市",
-        color: "#244779",
-      },
-      {
-        start: 10,
-        end: 10,
-        label: "扬州市",
-        color: "#246198",
-      },
-      {
-        start: 11,
-        end: 11,
-        label: "镇江市",
-        color: "#2884db",
-      },
-      {
-        start: 12,
-        end: 12,
-        label: "泰州市",
-        color: "#2884db",
-      },
-      {
-        start: 13,
-        end: 13,
-        label: "宿迁市",
-        color: "#244779",
-      },
-    ];
-    var chartDom = document.getElementById("map");
-    var myChart = this.$echarts.init(chartDom, null, {
-      devicePixelRatio: 10, // 设置为2或更高的值
-    });
-
-    //获取山东地图数据。
-    $.get(
-      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
-      function (geojson) {
-        echarts.registerMap("山东", geojson);
-        let option = {
-          series: [
-            {
-              tooltip: {
-                trigger: "item",
-              },
-              name: "山东",
-              type: "map3D",
-              map: "山东",
-              boxDepth: 60, //地图倾斜度
-              regionHeight: 6, //地图厚度
-              label: {
-                show: true, //是否显示市
-                textStyle: {
-                  color: "#fff", //文字颜色
-                  fontSize: 12, //文字大小
-                  fontFamily: "微软雅黑",
-                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
-                },
-              },
-              itemStyle: {
-                opacity: 1, // 透明度
-                borderWidth: 1.5, //分界线宽度
-                borderColor: "#0699E4", //分界线颜色
-              },
-              groundplane: {
-                show: true,
-              },
-              data: data,
-              //shading: 'realistic',
-              // 真实感材质相关配置 shading: 'realistic'时有效
-              realisticMaterial: {
-                detailTexture: "#093099", // 纹理贴图
-                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                metalness: 1, // 0材质是非金属 ，1金属
-                roughnessAdjust: 0,
-              },
-              viewControl: {
-                distance: 80, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            },
-          ],
-          dataRange: {
-            show: false,
-            splitList: splitList,
-          },
-          animation: true,
-        };
-        myChart.setOption(option);
-        myChart.on("click", this.chartClick);
-        let chartClick = function (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: 100, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
-              },
-            };
-            myChart.setOption(option);
-          });
-        };
-      }
-    );
+    this.initMap();
   },
   beforeDestroy() {
     //离开页面后，删除屏幕监听，防止监听事件一直存在
@@ -1965,6 +1972,60 @@ export default {
       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>