diff --git a/.history/src/views/XQXY_20231208144150.vue b/.history/src/views/XQXY_20231208144150.vue
new file mode 100644
index 0000000..9cbe87f
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144150.vue
@@ -0,0 +1,2065 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144213.vue b/.history/src/views/XQXY_20231208144213.vue
new file mode 100644
index 0000000..0339588
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144213.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144216.vue b/.history/src/views/XQXY_20231208144216.vue
new file mode 100644
index 0000000..3320de4
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144216.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144244.vue b/.history/src/views/XQXY_20231208144244.vue
new file mode 100644
index 0000000..22ca387
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144244.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144302.vue b/.history/src/views/XQXY_20231208144302.vue
new file mode 100644
index 0000000..c265e1f
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144302.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "left",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144324.vue b/.history/src/views/XQXY_20231208144324.vue
new file mode 100644
index 0000000..e0bc753
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144324.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144343.vue b/.history/src/views/XQXY_20231208144343.vue
new file mode 100644
index 0000000..eb39b68
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144343.vue
@@ -0,0 +1,2071 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          // var selectedPro = param.name;
+          // if (!cityProper[selectedPro]) {
+          //   option.series.splice(1);
+          //   option.legend = null;
+          //   option.visualMap = null;
+          //   myChart.setOption(option, true);
+          //   return;
+          // }
+          //获取点击区域数据
+          // $.get(cityProper[selectedPro], function (geojson) {
+          //   echarts.registerMap(selectedPro, geojson);
+          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+          //   option.series[0] = {
+          //     name: "",
+          //     type: "map",
+          //     map: selectedPro,
+          //     boxDepth: 80, //地图倾斜度
+          //     regionHeight: 5, //地图厚度
+          //     itemStyle: {
+          //       normal: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //       emphasis: {
+          //         label: {
+          //           show: true,
+          //         },
+          //       },
+          //     },
+          //     groundplane: {
+          //       show: false,
+          //     },
+          //     data: data,
+          //     shading: "realistic",
+          //     // 真实感材质相关配置 shading: 'realistic'时有效
+          //     realisticMaterial: {
+          //       detailTexture: "#fff", // 纹理贴图
+          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+          //       metalness: 0, // 0材质是非金属 ，1金属
+          //       roughnessAdjust: 0,
+          //     },
+          //     viewControl: {
+          //       distance: 30, // 地图视角 控制初始大小
+          //       rotateSensitivity: 1, // 旋转
+          //       zoomSensitivity: 1, // 缩放
+          //     },
+          //   };
+          //   myChart.setOption(option);
+          // });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144443.vue b/.history/src/views/XQXY_20231208144443.vue
new file mode 100644
index 0000000..6f16e46
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144443.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144554.vue b/.history/src/views/XQXY_20231208144554.vue
new file mode 100644
index 0000000..5b6fcbb
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144554.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 20,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144609.vue b/.history/src/views/XQXY_20231208144609.vue
new file mode 100644
index 0000000..462cc77
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144609.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144610.vue b/.history/src/views/XQXY_20231208144610.vue
new file mode 100644
index 0000000..462cc77
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144610.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144645.vue b/.history/src/views/XQXY_20231208144645.vue
new file mode 100644
index 0000000..ff8419d
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144645.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 60,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144653.vue b/.history/src/views/XQXY_20231208144653.vue
new file mode 100644
index 0000000..0de6e4e
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144653.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144757.vue b/.history/src/views/XQXY_20231208144757.vue
new file mode 100644
index 0000000..c5ad479
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144757.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144807.vue b/.history/src/views/XQXY_20231208144807.vue
new file mode 100644
index 0000000..08385aa
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144807.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 320,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144815.vue b/.history/src/views/XQXY_20231208144815.vue
new file mode 100644
index 0000000..ae95f17
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144815.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 160,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144846.vue b/.history/src/views/XQXY_20231208144846.vue
new file mode 100644
index 0000000..08cccf0
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144846.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144908.vue b/.history/src/views/XQXY_20231208144908.vue
new file mode 100644
index 0000000..94f3233
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144908.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          right: 120,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144914.vue b/.history/src/views/XQXY_20231208144914.vue
new file mode 100644
index 0000000..a9eb991
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144914.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144920.vue b/.history/src/views/XQXY_20231208144920.vue
new file mode 100644
index 0000000..451d96c
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144920.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144940.vue b/.history/src/views/XQXY_20231208144940.vue
new file mode 100644
index 0000000..4e42df1
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144940.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208144946.vue b/.history/src/views/XQXY_20231208144946.vue
new file mode 100644
index 0000000..e436eab
--- /dev/null
+++ b/.history/src/views/XQXY_20231208144946.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208145010.vue b/.history/src/views/XQXY_20231208145010.vue
new file mode 100644
index 0000000..e436eab
--- /dev/null
+++ b/.history/src/views/XQXY_20231208145010.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208145056.vue b/.history/src/views/XQXY_20231208145056.vue
new file mode 100644
index 0000000..e436eab
--- /dev/null
+++ b/.history/src/views/XQXY_20231208145056.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208150539.vue b/.history/src/views/XQXY_20231208150539.vue
new file mode 100644
index 0000000..0355051
--- /dev/null
+++ b/.history/src/views/XQXY_20231208150539.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "10%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208150646.vue b/.history/src/views/XQXY_20231208150646.vue
new file mode 100644
index 0000000..a32ddef
--- /dev/null
+++ b/.history/src/views/XQXY_20231208150646.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "10%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 1,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231208150653.vue b/.history/src/views/XQXY_20231208150653.vue
new file mode 100644
index 0000000..0355051
--- /dev/null
+++ b/.history/src/views/XQXY_20231208150653.vue
@@ -0,0 +1,2020 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>山东需求响应工作开展情况</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">需求响应执行分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "12%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: "0.0625rem",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        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: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "right",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "0.0625rem",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          x: "right",
+          right: 50,
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "10%",
+          right: "5%",
+          bottom: "20%",
+          top: "22%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: "0.0625rem",
+            },
+          },
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 4,
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "right",
+          y: "top",
+          right: 100,
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.0625rem",
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 3,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 3,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "工业",
+              icon: "rect",
+            },
+            {
+              name: "楼宇",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+    xuefeng() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "削锋",
+        },
+        {
+          value: 14.8,
+          name: "填谷",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: "0.0833rem",
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: "0.0625rem",
+          // padding: [8, 0],
+        },
+      };
+      let option = {
+        grid: {
+          left: "20%", // 调整饼状图的左边距
+          top: "20%", // 调整饼状图的上边距
+          right: "20%", // 调整饼状图的右边距
+          bottom: "20%", // 调整饼状图的下边距
+        },
+        title: {
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
+          left: "16%",
+          top: "40%",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              percents: {
+                fontSize: "0.0729rem",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
+              },
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += echartData[i].value;
+            }
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [
+            {
+              name: "削锋",
+              icon: "rect",
+            },
+            {
+              name: "填谷",
+              icon: "rect",
+            },
+          ],
+          left: 180,
+          top: 60,
+          orient: "vertical",
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+              num: {
+                fontSize: "0.0625rem",
+                // color: "#fff",
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["25%", "50%"],
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#13AAF3", "#6FF0FD"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("xuefeng", option);
+    },
+    // 地图
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+      //注入山东地图数据。
+      let src = require("../assets/shandong.json");
+      function registerMap() {
+        echarts.registerMap("山东", src);
+        //拿到json数据
+        var mapFeatures = echarts.getMap("山东").geoJson.features;
+        var geoCoordMap = {};
+        //拿到需要的字段
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.center;
+        });
+        //在基础数据中加入value字段 并加入到数组中
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return res;
+        };
+        let option = {
+          // 动效散点图层，使用2D地图坐标系
+          geo: {
+            // 2D地图坐标系
+            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
+            map: "山东",
+            roam: false, // 禁用缩放、拖拽
+            layoutCenter: ["50%", "50%"], // 地图中心位置
+            layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
+            aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
+            zlevel: 1,
+          },
+          series: [
+            //动态散点系列
+            {
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 3,
+              rippleEffect: {
+                //涟漪特效
+                period: 3, //动画时间，值越小速度越快
+                brushType: "fill", //波纹绘制方式 stroke, fill
+                scale: 5, //波纹圆环最大限制，值越大波纹越大
+              },
+              symbol: "circle",
+              symbolSize: 7,
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#D8C74A",
+                },
+              },
+              data: [],
+            },
+            {
+              tooltip: {
+                trigger: "item",
+                // show: false,
+              },
+              name: "山东",
+              type: "map",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              aspectScale: 0.9, //地图长宽比
+              emphasis: {
+                itemStyle: {
+                  areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                  borderWidth: 2, // 高亮时的边框宽度
+                },
+                label: {
+                  fontSize: "0.06rem", // 选中地图文字字号和字体颜色
+                  color: "#fff",
+                },
+              },
+              label: {
+                show: true, //是否显示市
+                zlevel: 4,
+                formatter: function (params) {
+                  var name = params.name;
+                  var value = params.value;
+                  var text = ` {fline|${value}}\n{tline|${name}} `;
+                  return text;
+                },
+                textStyle: {
+                  color: "#000", //文字颜色
+                  fontSize: "0.08rem", //文字大小
+                  fontFamily: "微软雅黑",
+                  // backgroundColor: {
+                  //   image: require("../assets/客户侧总体用能情况分析/光标.png"),
+                  // },
+                  // backgroundSize: "10px 10px",
+                  // backgroundPosition: "top left",
+                },
+                rich: {
+                  fline: {
+                    padding: [0, 35],
+                    color: "#FDCC00",
+                    fontSize: "0.07rem",
+                    fontWeight: 600,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: "#fff",
+                    fontSize: "0.06rem",
+                  },
+                },
+              },
+              itemStyle: {
+                opacity: 0.8, // 透明度
+                borderWidth: 2, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+                areaColor: {
+                  x: 0.5,
+                  y: 0.7,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(20,110,230,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(6,33,121,0.4)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              z: 999,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0.8, // 调整光照模型的粗糙度
+                metalness: 0.0, // 调整金属感，0.0 为非金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 90, // 地图视角 控制初始大小
+                rotateSensitivity: 0, // 旋转
+                zoomSensitivity: 1.5, // 缩放
+              },
+              zoom: 1.25,
+            },
+          ],
+          animation: true,
+        };
+
+        option.series[0].data = convertData(data); // 设置动效散点数据
+
+        myChart.setOption(option);
+        myChart.on("click", chartClick);
+        //点击地图区域事件
+        function chartClick(param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+        }
+      }
+      registerMap();
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: -100px;
+      margin-right: -20px;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              margin-left: 2px;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 316px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 36px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            margin-top: 5px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 60px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 410px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+              margin-left: 40px;
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+              margin-right: 15px;
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 321px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3118.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 180px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 327px;
+        width: 100%;
+        background: url("../assets/xqdp/组\ 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #gongye {
+              width: 300px;
+              height: 160px;
+            }
+          }
+          .xyzy2 {
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            padding-top: 20px;
+            p:nth-child(1) {
+              width: 103px;
+              height: 36px;
+              margin-top: 60px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+            }
+            #xuefeng {
+              width: 300px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 1.2rem;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+  }
+  #map {
+    width: 994px;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue
index b8c91e3..a131945 100644
--- a/src/views/XQXY.vue
+++ b/src/views/XQXY.vue
@@ -10,7 +10,7 @@
     <div class="containter">
       <div class="left">
         <div class="ndqyyh">
-          <p class="title">省综代理用户情况</p>
+          <p class="title">代理用户情况</p>
           <div class="bg_title">
             <p class="tit_first">2,356<span class="tit_danwei">户</span></p>
             <div class="tit_second">
@@ -27,7 +27,7 @@
           <div id="qyyh"></div>
         </div>
         <div class="ndsdl">
-          <p class="title">年度售电量</p>
+          <p class="title">申报响应量情况</p>
           <div class="bg_title">
             <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
             <div class="tit_second">
@@ -465,7 +465,7 @@ export default {
         grid: {
           top: "15%",
           right: "5%",
-          left: "8%",
+          left: "12%",
           bottom: "13%",
         },
         xAxis: [
@@ -481,11 +481,12 @@ export default {
               },
               formatter: "",
             },
-            // splitLine: {
-            //     lineStyle: {
-            //         color: 'rgba(255,255,255,0.12)'
-            //     }
-            // }
+            splitLine: {
+            show:false,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
           },
         ],
         yAxis: [
@@ -508,6 +509,12 @@ export default {
             axisTick: {
               show: false,
             },
+            splitLine: {
+            show:true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
           },
         ],
         series: [
@@ -545,7 +552,7 @@ export default {
                 show: true,
                 lineHeight: 10,
                 formatter: "{c}",
-                position: "top",
+                position: "right",
                 textStyle: {
                   color: "#fff",
                   fontSize: "0.0625rem",
@@ -587,7 +594,7 @@ export default {
                 show: true,
                 lineHeight: 10,
                 formatter: "{c}",
-                position: "top",
+                position: "right",
                 textStyle: {
                   color: "#fff",
                   fontSize: "0.0625rem",
@@ -599,8 +606,8 @@ export default {
         legend: {
           x: "right",
           right: 50,
-          itemWidth:16,
-          itemHeight:4,
+          itemWidth: 16,
+          itemHeight: 4,
           data: [
             {
               icon: "roundRect",
@@ -623,10 +630,10 @@ export default {
         //   trigger: "axis",
         // },
         grid: {
-          left: "5%",
+          left: "10%",
           right: "5%",
           bottom: "20%",
-          top:"22%"
+          top: "22%",
           // containLabel: true
         },
         // toolbox: {
@@ -639,18 +646,18 @@ export default {
           // boundaryGap: false,
           data: ["2019", "2020", "2021"],
           axisLine: {
-              lineStyle: {
-                color: "#FFFFFF",
-              },
-            },
-            axisTick: {
-              show: false,
+            lineStyle: {
+              color: "#FFFFFF",
             },
+          },
+          axisTick: {
+            show: false,
+          },
           axisLabel: {
             textStyle: {
               fontSize: "0.0729rem",
-              },
-              fontSize: "0.0729rem",
+            },
+            fontSize: "0.0729rem",
             color: "#fff",
             margin: 15,
           },
@@ -682,22 +689,22 @@ export default {
           },
         },
         legend: {
-          itemWidth:16,
-          itemHeight:4,
+          itemWidth: 16,
+          itemHeight: 4,
           data: [
             {
-              icon:"rect",
+              icon: "rect",
               name: "削锋",
             },
             {
-              icon:"rect",
+              icon: "rect",
               name: "填谷",
             },
           ],
           x: "right",
           y: "top",
-          right:100,
-          top:0,
+          right: 100,
+          top: 0,
           textStyle: {
             color: "#fff",
             fontSize: "0.0625rem",
@@ -837,25 +844,25 @@ export default {
           bottom: "20%", // 调整饼状图的下边距
         },
         title: {
-            text: "{percents|" + "85.2%" + "}\n{val|" +"工业" + "}",
+          text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
           left: "16%",
           top: "40%",
           textStyle: {
             color: "#fff",
-            rich:{
-              percents:{
+            rich: {
+              percents: {
                 fontSize: "0.0729rem",
-                align:"center",
-                fontWeight:700,
-                lineHeight:28,
-                color:"#fff",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
               },
-              val:{
-                fontSize:"0.0625rem",
-                align:"center",
-                color:"#fff",
-              }
-            }
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
           },
         },
         legend: {
@@ -872,7 +879,7 @@ export default {
             console.log(item);
             percent = ((item.value / total) * 100).toFixed(2);
             if (name !== "") {
-              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
               // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
             } else {
               return "";
@@ -888,7 +895,7 @@ export default {
               icon: "rect",
             },
           ],
-          right: 20,
+          left: 180,
           top: 60,
           orient: "vertical",
           align: "left",
@@ -958,25 +965,25 @@ export default {
           bottom: "20%", // 调整饼状图的下边距
         },
         title: {
-            text: "{percents|" + "85.2%" + "}\n{val|" +"削锋" + "}",
+          text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
           left: "16%",
           top: "40%",
           textStyle: {
             color: "#fff",
-            rich:{
-              percents:{
+            rich: {
+              percents: {
                 fontSize: "0.0729rem",
-                align:"center",
-                fontWeight:700,
-                lineHeight:28,
-                color:"#fff",
+                align: "center",
+                fontWeight: 700,
+                lineHeight: 28,
+                color: "#fff",
               },
-              val:{
-                fontSize:"0.0625rem",
-                align:"center",
-                color:"#fff",
-              }
-            }
+              val: {
+                fontSize: "0.0625rem",
+                align: "center",
+                color: "#fff",
+              },
+            },
           },
         },
         legend: {
@@ -993,7 +1000,7 @@ export default {
             console.log(item);
             percent = ((item.value / total) * 100).toFixed(2);
             if (name !== "") {
-              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}\t\t{name|%}`;
               // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
             } else {
               return "";
@@ -1009,7 +1016,7 @@ export default {
               icon: "rect",
             },
           ],
-          right: 20,
+          left: 180,
           top: 60,
           orient: "vertical",
           align: "left",
@@ -1311,57 +1318,6 @@ export default {
           window.addEventListener("resize", function () {
             myChart.resize();
           });
-          // var selectedPro = param.name;
-          // if (!cityProper[selectedPro]) {
-          //   option.series.splice(1);
-          //   option.legend = null;
-          //   option.visualMap = null;
-          //   myChart.setOption(option, true);
-          //   return;
-          // }
-          //获取点击区域数据
-          // $.get(cityProper[selectedPro], function (geojson) {
-          //   echarts.registerMap(selectedPro, geojson);
-          //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
-          //   option.series[0] = {
-          //     name: "",
-          //     type: "map",
-          //     map: selectedPro,
-          //     boxDepth: 80, //地图倾斜度
-          //     regionHeight: 5, //地图厚度
-          //     itemStyle: {
-          //       normal: {
-          //         label: {
-          //           show: true,
-          //         },
-          //       },
-          //       emphasis: {
-          //         label: {
-          //           show: true,
-          //         },
-          //       },
-          //     },
-          //     groundplane: {
-          //       show: false,
-          //     },
-          //     data: data,
-          //     shading: "realistic",
-          //     // 真实感材质相关配置 shading: 'realistic'时有效
-          //     realisticMaterial: {
-          //       detailTexture: "#fff", // 纹理贴图
-          //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-          //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-          //       metalness: 0, // 0材质是非金属 ，1金属
-          //       roughnessAdjust: 0,
-          //     },
-          //     viewControl: {
-          //       distance: 30, // 地图视角 控制初始大小
-          //       rotateSensitivity: 1, // 旋转
-          //       zoomSensitivity: 1, // 缩放
-          //     },
-          //   };
-          //   myChart.setOption(option);
-          // });
         }
       }
       registerMap();
@@ -1413,20 +1369,19 @@ export default {
       background-size: cover;
       text-align: center;
       p {
-      width: 627px;
-      height: 47px;
-      font-size: 44px;
-      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
-      font-weight: 600;
-      text-align: center;
-      line-height: 47px;
-      letter-spacing: 3px;
-      color: #fff;
-      margin-left: 490px;
-      // margin-left: -50px;
+        width: 627px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        text-align: center;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: 490px;
+        // margin-left: -50px;
+      }
     }
-    }
-
 
     img:nth-of-type(1) {
       width: 231px;
@@ -2053,13 +2008,13 @@ export default {
   }
   #map {
     width: 994px;
-      position: absolute;
-      height: 627px;
-      background: url(../assets/客户侧总体用能情况分析/背景.png);
-      background-size: cover;
-      left: 50%;
-      transform: translateX(-50%);
-      overflow: hidden;
+    position: absolute;
+    height: 627px;
+    background: url(../assets/客户侧总体用能情况分析/背景.png);
+    background-size: cover;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
   }
 }
 </style>